在离子列表中添加项目（离子）答案

【问题标题】：Adding Items the Ion-List (Ionic)在离子列表中添加项目（离子）
【发布时间】：2019-01-19 04:08:02
【问题描述】：

我的 html 页面中有这个：

<ion-content padding>
  <ion-list></ion-list>
</ion-content>

我想从我的 .ts 文件中将项目添加到此列表中。我该怎么做？

【问题讨论】：

标签： html list typescript ionic-framework ionic2

【解决方案1】：

在 .ts 上渲染 HTML 不是一个好的选择，您应该在 .ts 上添加一个 Array/Observable 和使用 ngFor 渲染它

<ion-list>
    <ion-item *ngFor="let term of yourArray;">
        <p>{{term}}</p>
    </ion-item>
</ion-list>

.ts 代码将，

yourArray = ['first','second'];

【讨论】：

如果我稍后在程序中向 yourArray 添加项目，是否必须重新渲染才能让项目显示在列表中？
不用，它使用了两种数据绑定，所以会自动渲染

【解决方案2】：

“将离子项添加到我的 .ts 文件”是什么意思？您应该将 ion-items 添加到 .html 文件中的 ion-list 中。

尝试以下方法：

<ion-content padding>
   <ion-list>
     <ion-item>
        My first item in this list
     </ion-item>

     <ion-item>
       My second item in this list
     </ion-item>
   </ion-list>
</ion-content>

请refer to the documentation查看ion-lists中ion-items的完整示例。

【讨论】：

我想从 ts 文件中添加这些项目
请查看我参考的官方文档的链接。在 .ts 文件中有显示变量项目的简单示例。