javascript - Can't access object property in angular - Stack Overflow

admin管理员组

文章数量:1289911

I am trying out angular, I have a home ponent that displays a list of countries, I want to display more information about the country in a detail view.

I can actually see the data when I pipe it to json in the template but can't access properties of the object.

in the home.html I have

<ion-list>
  <ion-item *ngFor="let country of countries">
     <ion-avatar item-start>
        <img [src]="country.flag" />
     </ion-avatar>
     <h5>{{country.name}}</h5>
     <p>{{country.exchange_count}} Exchanges</p>
     <button ion-button primary outline item-end (click)="about(country)">View</button>
  </ion-item>
</ion-list>

home.ts

about(country){
  console.log(typeof(country))
  this.navCtrl.push(AboutPage, {country:country})
}

about.ts, the country's name is printed on the console

ionViewDidLoad () {
  this.country = this.navParams.get('country');
  console.log(this.country.name);
}

about.hmtl, here is where doing something like country.name raised an error can't access property name of undefined but when I do as below, the dumped data shows on the page.

<ion-content>
    {{country | json}}
    <!-- {{country.name}} -->
</ion-content>

on the about.html page, here is the result when piped into json, I trimmed the data for brevity

 {"id":"1","name":"Ghana","iso_code":"GHS","currency":"GHS",
"exchange_count":1}

I have tried several things, what am I missing?

I am trying out angular, I have a home ponent that displays a list of countries, I want to display more information about the country in a detail view.

I can actually see the data when I pipe it to json in the template but can't access properties of the object.

in the home.html I have

<ion-list>
  <ion-item *ngFor="let country of countries">
     <ion-avatar item-start>
        <img [src]="country.flag" />
     </ion-avatar>
     <h5>{{country.name}}</h5>
     <p>{{country.exchange_count}} Exchanges</p>
     <button ion-button primary outline item-end (click)="about(country)">View</button>
  </ion-item>
</ion-list>

home.ts

about(country){
  console.log(typeof(country))
  this.navCtrl.push(AboutPage, {country:country})
}

about.ts, the country's name is printed on the console

ionViewDidLoad () {
  this.country = this.navParams.get('country');
  console.log(this.country.name);
}

about.hmtl, here is where doing something like country.name raised an error can't access property name of undefined but when I do as below, the dumped data shows on the page.

<ion-content>
    {{country | json}}
    <!-- {{country.name}} -->
</ion-content>

on the about.html page, here is the result when piped into json, I trimmed the data for brevity

 {"id":"1","name":"Ghana","iso_code":"GHS","currency":"GHS",
"exchange_count":1}

I have tried several things, what am I missing?

• javascript
• angular

Share Improve this question Follow edited Jun 27, 2018 at 11:39 Avinash 1,2431212 silver badges1919 bronze badges asked Jun 27, 2018 at 10:35 Bernard 'Beta Berlin' ParahBernard 'Beta Berlin' Parah 2,15722 gold badges2525 silver badges4444 bronze badges 5

• what does {{country | json}} shows? – Sajeetharan Commented Jun 27, 2018 at 10:36
• it dumps the actual country object that was passed. Let me update the question with it – Bernard 'Beta Berlin' Parah Commented Jun 27, 2018 at 10:38
• 1 Try {{ country?.name }} - that'll make country optional, and not fail if it's not there. If it es in at a later time, it'll read the property. The json pipe is fail safe to undefined inputs, which is why it seems to work better. – Thor Jacobsen Commented Jun 27, 2018 at 10:39
• 1 View is being generated before ionViewDidLoad method, therefore variable is still not initialized. Initialize it with an empty values in the constructor of your AboutPage. Something like constructor() { public const country = {name:''}} – Vadim Aidlin Commented Jun 27, 2018 at 10:40
• thanks, both your solutions worked!!! – Bernard 'Beta Berlin' Parah Commented Jun 27, 2018 at 10:48

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

Try to use safe navigation operator or ngif to verify the object is present , or you can initialize the country object as well.

<ion-content>
     {{country?.name}} 
</ion-content>

or

constructor() { public const country = {name:'',... etc}};

I had the same issue. I had an object(home) that has two properties id and name When I tried to access them in the HTML, the console logged me following error

ERROR TypeError: Cannot read properties of undefined (reading 'id')

So I had to add *ngIf element to verify the object is present.

 <table class="table" *ngIf="homeToDelete">
  <thead>
      <tr>
          <th class="left">{{labels.id}}</th>
          <th>{{labels.name}}</th>
      </tr>
  </thead>
  <tbody>
      <tr>
          <td class="left">{{homeToDelete.id}}</td>
          <td>{{homeToDelete.name}}</td>
      </tr>
    </tbody>
</table>

本文标签： javascriptCan39t access object property in angularStack Overflow