使用嵌套的 ngFor 遍历两个单独的数组答案

【问题标题】：using nested ngFor to traverse two separate arrays使用嵌套的 ngFor 遍历两个单独的数组
【发布时间】：2019-01-18 10:05:59
【问题描述】：

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

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

【问题讨论】：

标签： javascript html angular typescript ionic-framework

【解决方案1】：

你有一个奇怪的混合 *ngFor 和通过索引直接访问。当您在 2 个不同的循环中使用 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>

【讨论】：

很好的答案！如果 OP 定义了一个联系人类型（接口），这样上面的代码可以使用属性（例如name 和title）而不是contact[1] 和contact[4]，那就更好了。它肯定会使它更易于维护和阅读。
谢谢你，这工作完美无缺！是的，你绝对是正确的@DeborahK，我在构建这个应用程序时肯定会考虑到这一点。干杯！
很高兴听到这个消息。不客气。 @DeborahK：谢谢。这种赞美对我来说意义重大。 :)

【解决方案2】：

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

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

【讨论】：