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

我对 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>

它以我想要的格式打印它们，但它没有获取所有联系人。这是结果

我见过一些其他人使用嵌套对象的例子，然而考虑到我应用程序中数据的存储方式，我更愿意使用数组。如果有人能帮我正确显示标签和联系人，我将不胜感激！谢谢。

答案＃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>

答案＃2

你正在奇怪地混用 *ngFor 和通过索引的直接访问。当你在两个不同的循环中使用 att 时，也容易引起误导。试试下面的方式：

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

    <ion-item-sliding *ngFor ="let contact of contactArray[tagIdx];  let idx = index">
        <ion-item>
           <ion-avatar item-start>
              <img src="">
                  </ion-avatar>
                      <h2 id="name">{{contact[1] + ' ' + contact[3]}}</h2>
                      <p id="company">{{contact[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>