如何在打字稿中以編程方式添加具有更改值的離子卡？

Question

我正在構建一個簡單的應用程序，在該程序中，我從服務器讀取了一些帖子，並嘗試將最新的帖子顯示為屏幕上的卡片。 我仍處於初期階段，我正在測試如何添加內容已更改的離子卡元素以及帶有打字稿的標頭？ 我當前的代碼就像是這樣：

fillPost() {
    for (let i: number = 0; i < 10; i++) {


         this.postContainer += "<ion-card> "
            + "<ion-item> <h2 item-left> Name here </h2>"
            + "<p> Post Number : +"i+" </p> </ion-item> <ion-card-content>"
            + "<p> Post Body here </p> </ion-card-content>"
            +"<ion-row > <ion-col > <button ion- button icon- left clear small> "
            + "<ion-icon name= \"thumbs-down\" > </ion-icon>"
            + "< div > Report < /div>"
            + "</button>"
            + "</ion-col>"
            + "<ion-col center text-center>"
            + "<ion-note>"
            + "1h ago"
            + "</ion-note>"
            + "</ion-col>"
            + "</ion-row>"
            + "</ion-card>";

    }



}

在我的HTML文件中：

 <div [innerHTML]="postContainer">
 </div>

有一個名為fillPost（）函數的按鈕，用於測試事物，但結果如下所示：

http://imgur.com/a/z5XyW

請幫助我，謝謝。

Answer 1

在Ionic中，使用html在ts文件中進行for循環並不常見。 您可以直接在HTML中使用* ngFor

https://angular.io/docs/ts/latest/api/common/index/NgFor-directive.html

 <ion-card *ngFor="let item of i">
  <ion-item>
    <h2 item-left> Name here </h2>
    <p> Post Number : {{item}} </p>
  </ion-item>
  <ion-card-content>
    <p> Post Body here </p>
  </ion-card-content>
  <ion-row>
    <ion-col> <button ion- button icon- left clear small>
            <ion-icon name= \"thumbs-down\" > </ion-icon>
            <div > Report < /div>
            </button>
    </ion-col>
    <ion-col center text-center>
      <ion-note>
        1h ago
      </ion-note>
    </ion-col>
  </ion-row>
</ion-card>

如果要從ts代碼讀取變量。 采用 {{}}

FE

{{Post Body}}

我可以向您展示我項目中的示例代碼，我從服務器上讀取了一些足球得分

<ion-card *ngFor="let item of data">
  <ion-card-content>
    <div style="text-align: center">
      <p>{{item.HomeTeam}}</p>
      <p> <strong>{{item.HomeGoals}}:{{item.AwayGoals}}</strong> </p>
      <p>{{item.Away}}</p>
  </ion-card-content>
</ion-card>

TS：我加載了api並返回了一個json

 ionViewDidLoad() {
  console.log("Standings Load", this.team)
   this._api.getData()
  .subscribe(d => this.data = d)