Question

我对离子和角度还很陌生，在使用* 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>

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

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

2 个答案: