Question

我正在尝试在循环中显示数组的元素。

result: {
  "success": true,
  "message": "Categories Found",
  "code": 200,
  "data": {
    "total": 5,
    "per_page": 15,
    "current_page": 1,
    "last_page": 1,
    "next_page_url": null,
    "prev_page_url": null,
    "from": 1,
    "to": 5,
     "data": [
          {
            "id": 8,
            "asset_id": 76,
            "parent_id": 12,
            "lft": 12,
            "rgt": 13,
            "level": 2,
            "path": "clothes/women",
            "extension": "com_content",
            "title": "Women",
            "alias": "women",
            "note": "",
            "description": "",
            "published": 1,
            "checked_out": 496,
            "checked_out_time": "2019-04-05 11:25:34",
            "access": 1,
            "params": "{\"category_layout\":\"\",\"image\":\"images\\/themeparrot\\/banner-category\\/banner.png\",\"image_alt\":\"women\"}",
            "metadesc": "",
            "metakey": "",
            "metadata": "{\"author\":\"\",\"robots\":\"\"}",
            "created_user_id": 496,
            "created_time": "2017-10-06 07:34:39",
            "modified_user_id": 496,
            "modified_time": "2017-12-05 12:39:35",
            "hits": 0,
            "language": "*",
            "version": 1
          },
          {
            "id": 9,
            "asset_id": 78,
            "parent_id": 12,
            "lft": 14,
            "rgt": 15,
            "level": 2,
            "path": "clothes/men",
            "extension": "com_content",
            "title": "Men",
            "alias": "men",
            "note": "",
            "description": "",
            "published": 1,
            "checked_out": 0,
            "checked_out_time": "0000-00-00 00:00:00",
            "access": 1,
            "params": "{\"category_layout\":\"\",\"image\":\"images\\/themeparrot\\/banner-category\\/banner_02.png\",\"image_alt\":\"men\"}",
            "metadesc": "",
            "metakey": "",
            "metadata": "{\"author\":\"\",\"robots\":\"\"}",
            "created_user_id": 496,
            "created_time": "2017-10-06 07:42:58",
            "modified_user_id": 496,
            "modified_time": "2017-12-05 12:39:40",
            "hits": 0,
            "language": "*",
            "version": 1
          },

以上是Api的响应。这是循环功能，需要在params下显示图像。

和我的ts：

displaycategory(){
    this.showLoader();
    this.categories.categorydisplay().then((result) => {
      console.log('result:'+JSON.stringify(result));
      this.loading.dismiss(); 
      this.data = JSON.parse(JSON.stringify(result));
      this.categorydata = JSON.parse(JSON.stringify(this.data.data.data));

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

和HTML：

<ion-grid>
        <ion-row>
        <ion-col col-6  *ngFor="let tms of categorydata;" (click)="test($event, tms.id)" >

  <ion-card *ngIf="tms.parent_id == 12">
      <img src="{{tms.params.image}}">
      <div class="card-title">{{tms.title}} </div>
      <div class="card-subtitle"></div>
    </ion-card>

  </ion-col>
</ion-row>
  </ion-grid>

在此html中，我需要显示一张图片。

Answer 1

您需要直接从结果json对象尝试以下

 this.categorydata = this.result.data.data;

Answer 2

您需要以这种方式在图像路径之前提供基本网址。

ts文件声明基本URL

export class HomePage implements OnInit {
 public baseurl='http://baseurl.xyz/';
  constructor(
    public navCtrl: NavController
  ) {

  }

然后只需在路径之前添加此基本URL

<ion-grid>
        <ion-row>
        <ion-col col-6  *ngFor="let tms of categorydata;" (click)="test($event, tms.id)" >

  <ion-card *ngIf="tms.parent_id == 12">
      <img src="{{baseurl+tms.params.image}}">
      <div class="card-title">{{tms.title}} </div>
      <div class="card-subtitle"></div>
    </ion-card>

  </ion-col>
</ion-row>
  </ion-grid>

对我有用。

Answer 3

首先，您应该更改ts以正确处理结果：

您正在使用this.data.data.data，this.data.data。
您应该仅解析作为字符串的params字段

displaycategory(){
    this.showLoader();
    this.categories.categorydisplay().then((result) => {
      console.log('result:'+JSON.stringify(result));
      this.loading.dismiss(); 
      this.data = JSON.parse(JSON.stringify(result));
      this.categorydata = this.data.data.map(({params, ...rest}) => ({...rest, params: JSON.parse(params)}));

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

我认为这样应该可以。

请记住以下问题，以详细说明您收到的错误。

如何在循环内显示数组元素

3 个答案: