迭代 Map angular4 中的对象列表

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>

如何使用地图键迭代所有地址

如果我们假设地图的键是"Fes">

Answer 1

Map API 公开了一个可用于获取Address[]的values()方法。

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

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

在组件类中：

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

您不能在带有ngFOr的Map上循环，因为它不被视为Iterable。

为此，您可以首先通过Array.from或手动循环来应用转换，正如 @vincecampanale BUT 指出的那样，但这会损害您的性能，因为它会在每次更改检测时触发并运行。

如果它是一个小应用程序，很好。如果您关心性能，则应使用(纯！(管道将转换应用于ngFor上的 Map + trackBy。

对于管道，不需要自己做，你可以使用 ngx 管道做

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

对于性能更好，并避免编码不存在的内容。还添加一个 trackBy 它会很棒:)