javascript - 使用嵌套的 ngFor 遍历两个单独的数组

Question

我对 ionic 和 Angular 相当陌生，并且在使用 *ngFor 打印两个单独数组的内容时遇到问题。

我在 .ts 文件中定义了这两个数组:

  public tagArray: any = ["Business", "Casual","Sales"];
  public contactArray: any = [
   [ //Business
    ['', 'John', '', 'Snow', 'Unemployed'],
    ['', 'Charles', '', 'Boyle', 'NYPD'],
    ['', 'Jim', '', 'Smith', 'Professor'],
    ['', 'Amy', '', 'Santiago', 'NYPD'],
    ['', 'Mike', '', 'Faust', 'Retired'],
    ['', 'Rosa', '', 'Diaz', 'NYPD'],
  ],
  [ //Casual
    ['', 'John', '', 'Cena', 'WWE'],
    ['', 'Raymond', '', 'Holt', 'NYPD'],
    ['', 'Mike', '', 'Galle', 'Professor'],
    ['', 'Jake', '', 'Peralta', 'NYPD'],
    ['', 'Amy', '', 'Santiago', 'NYPD'],
  ],
  [ //Sales
    ['', 'Mike', '', 'Ross', 'Lawyer'],
    ['', 'Terry', '', 'Jeffords', 'NYPD'],
    ['', 'Louis', '', 'Litt', 'Lawyer'],
  ]
];

我想显示一个标签，然后显示该标签下面的所有联系人，然后是下一个标签，依此类推。

但是，当我尝试显示标签和内容时，每个标签只显示 3 个联系人(因为有 3 个标签)。我相信它对标签索引和联系人索引使用相同的值。这是html代码:

<ion-list-header *ngFor = "let att of tagArray; let tagidx = index">
  <h1>{{ att.h1 }}{{ tagArray[tagidx] }}</h1>

<ion-item-sliding *ngFor ="let att of contactArray;  let idx = index">
  <ion-item>
    <ion-avatar item-start>
      <img src="">
    </ion-avatar>
    <h2 id="name">{{att.h2}} {{contactArray[tagidx][idx][1] + ' ' + contactArray[tagidx][idx][3]}}</h2>
    <p id="company">{{att.p2}} {{contactArray[tagidx][idx][4]}}</p>
  </ion-item>
  <ion-item-options>
    <button ion-button color="light" icon-start>
      <ion-icon name="ios-more"></ion-icon>
      More
    </button>
    <button ion-button color="primary" icon-start>
      <ion-icon name="text"></ion-icon>
      Text
    </button>
    <button ion-button color="secondary" icon-start>
      <ion-icon name="call"></ion-icon>
      Call
    </button>
  </ion-item-options>

</ion-item-sliding>

</ion-list-header>

它以我想要的格式打印它们，但它没有获取所有联系人。 This is the result

我见过其他人使用嵌套对象的一些示例，但是根据数据在我的应用程序中存储的方式，我更喜欢使用数组。任何有关如何正确显示标签和联系人的帮助将不胜感激!谢谢。

Answer 1

您可以通过以下更改迭代您的联系人

//<ion-item-sliding *ngFor ="let att of contactArray;  let idx = index">
<ion-item-sliding *ngFor ="let contact of contactArray[tagidx]">

contact 是一个联系人的数组

//<h2 id="name">{{att.h2}} {{contactArray[tagidx][idx][1] + ' ' + contactArray[tagidx][idx][3]}}</h2>
//<p id="company">{{att.p2}} {{contactArray[tagidx][idx][4]}}</p>
<h2 id="name">{{att.h2}} {{contact[1] + ' ' + contact[3]}}</h2>
<p id="company">{{att.p2}} {{contact[4]}}</p>