Question

我正在尝试角度显示，我有一个显示国家列表的home组件，我想在详细视图中显示有关该国家的更多信息。

当我将其通过管道传输到模板中的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})
}

about.ts，国家名称会显示在控制台上

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

无法访问Angular中的对象属性

1 个答案: