Question

我如何用简单的JSON填充HTML，如：

{
    "id": 34,
    "name": "Tip 33",
    "description": "Tip description 33",
    "created_at": "2018-01-26 18:59:19",
    "updated_at": "2018-01-26 18:59:19"
}

我使用的代码为：

<ion-content>
  <ion-card *ngFor="let data of searchResults">
    <ion-card-header>
      {{data.name}}
    </ion-card-header>
    <ion-card-content>
      {{data.description}}
    </ion-card-content>
  </ion-card>
</ion-content>

但我得到的错误是：

错误：无法找到不同的支持对象＆＃39; [object Object]＆＃39;的键入＆＃39;提示33＆＃39;。 NgFor仅支持绑定到Iterables，例如阵列。

我的获取json的代码是：

 this.apiService.getCareerDescription(data).retry(3)
      .subscribe(data => {
        console.log(data);
        this.loading.dismiss();
        this.searchResults = data;
        //let obj = JSON.parse(this.searchResults);
        //console.log(obj);

        console.log(this.searchResults);
        ;
      }, (err) => {
        this.loading.dismiss();
      }
    );

请帮助

Answer 1

为此我们必须实现自定义管道。

管：

@Pipe({id : 'key'})
export class custompipe implements PipeTransform {


transform(value, arts:string[]) : any {
let key = [];
for(let key in value){
key.push({key : key, value:value[key]});
}
return key;
}
}

并将其用作：

<span *ngFor="#data of SearchResult I key">
Key: {{data.key}} , value: {{data.value}}

Answer 2

你没有一个拥有简单对象的数组。因此，此处不需要*ngFor。您只需通过他们的名字访问这些属性即可。错误表明您的searchResults是一个对象，而不是数组。

<ion-content>
  <ion-card>
    <ion-card-header>
      {{searchResults?.name}}
    </ion-card-header>
    <ion-card-content>
      {{searchResults?.description}}
    </ion-card-content>
  </ion-card>
</ion-content>

如何在没有json数组的情况下使用ngFor填充HTML

2 个答案: