Не удается получить доступ к свойству объекта в угловых

Question

Я пробую угловой, у меня есть домашний компонент, который отображает список стран, я хочу отобразить дополнительную информацию о стране в подробном представлении.

Я на самом деле могу видеть данные, когда я передаю их в шаблон json, но не могу получить доступ к свойствам объекта.

в home.html У меня есть

<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})
}

о.ц, название страны напечатано на консоли

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

about.hmtl, здесь при выполнении чего-то вроде country.name выдается ошибка can't access property name of undefined, но когда я делаю, как показано ниже, сброшенные данные отображаются на странице.

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

на странице about.html, вот результат, когда я отправил его в json, я сократил данные для краткости

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

Я пробовал несколько вещей, чего мне не хватает?

Answer 1

Попробуйте использовать оператор безопасной навигации или ngif, чтобы убедиться, что объект присутствует, или вы также можете инициализировать объект страны.

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

или

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