* ng用于多个数组

Question

我有一个包含2个数组的对象数据（照片和注释来自服务器），我想用* ngFor显示它们，但是ngFor仅显示数组类型。

这是我的Ts文件：

this.comments=[];
// ...
  .subscribe((data) => {
    this.comments= data.comments;
    console.log("data: ", data);
    this.commentPhoto = data.Photo; 
    // I don't want to create another array 
    // I want to make commentPhoto and comments array in 1 Array to show them.

HMTL

<ion-row *ngFor="let cm of comments">

  <ion-col col-2 style="border:1px solid grey;">
    <img src="{{cm.photo}}" style="width:45px;height:45px;">
  </ion-col>

  <ion-col col-10 style="border:1px solid grey;">
    {{cm}}
  </ion-col>
</ion-row>

我该如何在1阵列数据照片中做到这一点 谢谢。

Answer 1

我认为您想从一个显示两个数组*ngFor。我可以看到您的数据包含两个数组：comment和photo。

您可以通过两种方式实现它，一种是：使用index：

this.comments= data.comment;
this.commentPhoto = data.Photo;

这里如果两个数组的长度是相同且顺序也是，那就试试这个：

<ion-row *ngFor="let cm of comments; let i = index">
  <ion-col col-2 style="border:1px solid grey;">
    <img src="{{commentPhoto[i]}}" style="width:45px;height:45px;">  // For photos
  </ion-col>
  <ion-col col-10 style="border:1px solid grey;">
    {{cm}}
  </ion-col>
</ion-row>

其次，将两个数组作为对象合并到一个位置，然后在模板中进行渲染：

data: [{comment: "...", photo: ""},..]

然后渲染这个。希望这对您有用。