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代码中读取变量。使用{{}}

f.e。

我可以向您展示我项目中的示例代码我从服务器上读了一些足球评分

<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)

如何在打字稿中以编程方式添加更改值的离子卡？

1 个答案: