*複数の配列を持つngFor

Question

2つの配列（写真とコメントはサーバーから来たもの）を含むオブジェクトデータを持っていますが、それらを* ngForで表示したいのですが、ngForは配列タイプのみを表示します。私は ありがとう1枚のアレイ データの写真でそれを行うことができますどのように

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> 

：

は、ここに私のTsのファイルです。

Answer 1

結果データを変更する必要があると思います。モデルを作って、PhotoDataとしましょう。

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

TSファイルまたはサービスコールに渡します。

Answer 2

私はそれをこのように実行します。

/** 
    * 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 3

私はあなたが1 *ngForから配列の両方を表示したいと思います。 データは、2つのアレイ：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> 

第2に、両方のオブジェクトをレンダリング前の1か所のオブジェクトとして結合します。 テンプレートに：

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

これをレンダリングします。これはあなたのために動作することを願っています。

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に含まれている配列が

を提出しているすべてのいただきありがとうございます。