ion-list 中的多个 *ngFor 循环答案

【问题标题】：Multiple *ngFor loops in ion-listion-list 中的多个 *ngFor 循环
【发布时间】：2018-06-20 21:51:05
【问题描述】：

我有两个数据数组。 “字幕”和“标题”。如何正确地将这两个数组合并到一个离子列表中，以便我在一个离子项中显示两个数组的标题和副标题（标题在副标题之上）？

在我的 .ts 文件中：

items = [
 'Email',
 'Phone Number',
 'Address',
 'Cards'
];

data = [ 
  "first last",
  "test phone number",
  "test address"
]

在我的 .html 文件中

<ion-content padding>
 <ion-list class="list">
  <div *ngFor="let unit of data">
    <button ion-item *ngFor="let item of items" (click)="enterPage(item)">
        {{item}}
        {{unit}}
   </button>
  </div>
 </ion-list>
</ion-content>

【问题讨论】：

如果您希望数组 data 具有相同数量的项目，例如数组 items，您可以将索引添加到 *ngFor（让 i = 索引），删除第二个循环并将 {{item}} 更改为{{items[i]}}
啊，我明白你在说什么。如果他们的金额不同怎么办？
如果 items 总是比 data 长，则为 itemsngfor 语句 /b> 并用 ngIf 尝试@Buczkowski 的方式。它不会成为问题。

标签： angular typescript ionic-framework

【解决方案1】：

  <button ion-item *ngFor="let item of items; let i = index" (click)="enterPage(item)">
        {{items[i]}}
        <h3>{{data[i]}}</h3>
  </button>

【讨论】：