Question

export class Person{
name:string,
age:number,
listAdress:Map<string,Adresses[]>

}

我需要解析每个人的所有地址

    <div *ngFor="let person of persons">
<div *ngFor="let adr of person.listAdress">==> it is possible ??
</div>

如何使用Map

的键迭代所有地址

如果我们假设Map的键是'Fes'

Answer 1

Map API公开了values()方法，您可以使用该方法获取Address[]。

数据结构有点令人困惑，但我会向您展示如何从该人那里获取第一个Address数组并使用*ngFor进行迭代。（*ngFor需要类似于Array的结构，而不仅仅是任何可迭代的结构。

在组件类中创建一个方法，将values iterable转换为数组：

在组件类中：

getAddresses(person: Person): Address[] {
  return Array.from(person.listAddress.values())[0];
}

在模板中：

<div *ngFor="let person of persons">
  <div *ngFor="let adr of getAddresses(person)"></div>
</div>

您还可以使用forEach()方法迭代每个值并将其添加到另一个数组（再次使用单独的方法）：

在组件类中：

getAllAddresses(person: Person): Address[] {
  const allAddresses: Address[] = [];
  person.listAddress.forEach((value: Address[]) => {
    allAddresses.push(...value);
  });
  return allAddresses;
}

在模板中：

<ul> All Addresses: 
  <li *ngFor="let adr of getAllAddresses(person)">
    {{ adr.num + ' ' + adr.street }}
  </li>
</ul>

以下是两个示例的工作应用的链接：https://stackblitz.com/edit/address-map

Answer 2

您无法使用Map循环ngFOr，因为它不被视为Iterable。

要做到这一点，您可以先应用Array.from来应用转换，或者按照@vincecampanale的指示手动循环它们但是它会损害您的表现，因为它会被触发并运行每次变化检测。

如果它是一个小应用程序，很好。如果你关心perfs，你应该使用（纯！）管道将转换应用到trackBy上的Map + ngFor。

对于管道，无需自己动手，您可以使用ngx-pipes并执行

<div *ngFor="let person of persons">
  <div *ngFor="let adr of person.listAdress | values"></div>
</div>

对于perf更好，并避免编码不存在的东西。还要添加一个trackBy，这将是非常好的：）

迭代Map angular4中的对象列表

2 个答案: