* ngFor有多个数组

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

我认为你想要从一个CloseClipboard显示数组。我可以看到您的数据有两个数组：*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>

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

Answer 2

我认为您需要修改结果数据。制作模型让我们说PhotoData。

public class PhotoData
{
    public Image Photo { get; set; }
    public string Comment { get; set; }
}

并将其传递给您的TS文件或服务电话。

Answer 3

我是这样做的：

/**
  * Function to return an array of keys of an object
  * @param itemObj
  * @returns {string[]}
 */
dataKeys(itemObj): Array<string> {
    return Object.keys(itemObj);
}

<ion-row *ngFor="let key of dataKeys">

  <ion-col col-2 style="border:1px solid grey;" *ngFor="let item of dataKeys[key]">
    <img src="{{item}}" style="width:45px;height:45px;">
  </ion-col>

</ion-row>

Answer 4

感谢您的所有答案，我这样解决了。

<强> TS

 .subscribe((data) => {
  this.comments= data;

<强> HTML

<ion-row *ngFor="let cm of comments.context; let i=index">

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

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

这里的照片和上下文是包含在数据Ts文件中的数组

谢谢大家。