0

我对 ionic/angular 非常陌生，并且遇到了 ngFor 的问题。现在，下面的 ngFor 按预期创建列和卡片，但卡片中没有显示我的items数组中的数据。我对为什么创建列/卡片但{{items.key}}数据没有显示在其中感到困惑。任何帮助将不胜感激！

（另外，这是我在这里的第一个问题，所以如果我使用了不正确的标签或任何东西，请告诉我）

.html 文件：

<ion-content>
<ion-grid>
<ion-row wrap>
  <ion-col *ngFor="let item of items" >
    <ion-card>
      <img src="assets/icon/tuneImage.png" />
      <ion-card-header>
        <ion-card-subtitle></ion-card-subtitle>
        <ion-card-title>{{items.key}}</ion-card-title>
      </ion-card-header>
      <ion-card-content>
      </ion-card-content>
    </ion-card>
  </ion-col>
</ion-row>
</ion-grid>
</ion-content>

.ts 文件：

export class Page2Page implements OnInit {
 public items:any;
 data: Observable<any>;

  constructor(public http: HttpClient) { }

  ngOnInit() {
        var url = 'https://thesession.org/tunes/new?format=json';
        this.data = this.http.get(url);
        this.data.subscribe(data =>{
        this.items  = Object.assign([], data.settings);
        //console.log(this.items[1].key);
        })
        }
  }

我在下方附上了一张当前未显示 {{items.key}} 值的卡片的图片

4

2 回答 2

2

因为键是每个项目的属性，而不是项目数组的属性。所以应该是item.key，不是items.key。

您应该真的，真的避免在any任何地方使用该类型。使用正确的类型会使这一点更加明显。在 AOT 模式下编译甚至会产生错误，而不是什么都不显示。

于 2019-11-17T12:53:14.787 回答
0

有两件事。

(i) 您可以简单地分配设置，因为它将数据作为数组返回。此外，您在绑定数据时应该使用正确的类型。您可以使用JSON2TS为您的类型创建模型。

  this.items  = data.settings;

（ii）它应该item.key代替 items.key ，因为您在item.

<ion-col *ngFor="let item of items" >
    <ion-card>
      <img src="assets/icon/tuneImage.png" />
      <ion-card-header>
        <ion-card-subtitle></ion-card-subtitle>
        <ion-card-title>{{item.key}}</ion-card-title>
      </ion-card-header>
      <ion-card-content>
      </ion-card-content>
    </ion-card>
</ion-col>
于 2019-11-17T12:56:28.627 回答