Cannot read property of undefined

Ionic Framework ionic-v3
1

I am using Ionic 3 since more than 4 months and i think, i already understood the basics. It seems, that i dont. I was programming a little option list, while this error occured:

132_8100_
2017-09-01 10_37_52-Developer Tools - 10.21.8.132_8100_.png959Ă—452 24.7 KB

asTranslation is a sub-subelement of the config object (exported in app.module.ts, works fine everywhere). In the template options.html, i try to use the in the options.ts set public variable config (in the constructor, i set the value of the class variable config to the exported variable config (from app.module.ts)).
The code is as shown below:
options.html

<ion-header>

  <ion-navbar>
    <ion-title translate>Options</ion-title>
  </ion-navbar>

</ion-header>


<ion-content padding>
  <ion-list>
    <ion-list-header translate>App preferences</ion-list-header>
    <button ion-button (click)="console.log(config)"></button>
    <ion-item>
      <ion-label translate>Language</ion-label>
      <ion-select interface="popover">
        <ion-option value="de_CH" (ionSelect)="setLanguage('de_CH', 'de')" [selected]="config.translate.asTranslation === 'de_CH'">Deutsch</ion-option>
        <ion-option value="en_GB" (ionSelect)="setLanguage('en_GB', 'en')" [selected]="config.translate.asTranslation === 'en_GB'">English</ion-option>
      </ion-select>
    </ion-item>
  </ion-list>
</ion-content>

options.ts

import {Component} from '@angular/core';
import {IonicPage} from 'ionic-angular';
import {config} from "../../app/app.module"; // exported config variable from app.module.ts

@IonicPage()
@Component({
  selector: 'page-options',
  templateUrl: 'options.html',
})
export class OptionsPage {
  public config;

  constructor(private translate: TranslateService) {
    // set global config variable into class variable (to access it in the template)
    this.config = config;
  }
}

So this actually works in every other template of my app.
“Set in the constructor and then access it via the classvariable in the template”.
But in this case, it (obviously) doesnt work. I am not sure, where i did a mistake.

My goal is, to read the value in config.translate.asTranslation and compare it to a string. If this comparison is true, the option should be shown as selected, otherwise, it should be “unselected”.

PS: My Ionic specs:

132_8100_

2

What does clicking that unnamed button log to the console?

3

Absolutly nothing… I removed it already.

4

I found a solution.

<ion-header>

  <ion-navbar>
    <ion-title translate>Options</ion-title>
  </ion-navbar>

</ion-header>


<ion-content padding>
  <ion-list>
    <!-- Remove ion-list-header && button -->
    <ion-item no-padding>
      <ion-label translate>Language</ion-label>
      <ion-select interface="popover">
        <!-- Rename config.translate to config.locale -->
        <ion-option value="de_CH" (ionSelect)="setLanguage('de_CH', 'de')" [selected]="config.locale.asTranslation === 'de_CH'">Deutsch</ion-option>
        <ion-option value="en_GB" (ionSelect)="setLanguage('en_GB', 'en')" [selected]="config.locale.asTranslation === 'en_GB'">English</ion-option>
      </ion-select>
    </ion-item>
    <ion-item no-padding>
      <ion-label translate>Use Fingerprintauthentification</ion-label>
      <ion-toggle [(ngModel)]="config.auth.useFingerprint"
                  disabled="{{!config.auth.fingerprintAvailable}}"></ion-toggle>
    </ion-item>
  </ion-list>
</ion-content>
5

Can you describe how exactly you changed it?

6

well, after a research in the project, i found out, that it was my bad. I was looking for the wrong sub object (translate does not exist in the object config). I was looking for config.locale. So a quick conclusion: I was looking for the mistake at the wrong part of the project. This discussion could be closed or even better removed.
Thank you guys for your support. This is why i prefer Ionic :slight_smile: :sweat_smile:

2 Likes
7

I haven’t helped with this (obviously), but just to chime in to say that while the support here on the forums is great, what can often help just as much is having solutions/posts to refer to (whether you’re looking for a solution or a helper looking to point to one) is often greater help. So I’m certainly not picking on you, but removing threads can often be detrimental, even if it’s your own fault!

8

Good thing is users can’t actually remove whole topics and only try to delete individual posts - which I would probably undo for the benefit of future readers :slight_smile:

But @D4rkMindz didn’t actually do that but chose his own post as solution (or maybe I did that, don’t remember) so this post will stay here and future people having similar problems will be able to find it via google and see that double checking the variables names should be done.