如何在 angular 中使用 ngFor 循环迭代数组

Question

'arr: { a: string[];b: string[];c: {id: number; name: string; }[]; } '

'''arr= {
a: ['rose', 'kelly', '35'],
b: ['marry', 'hadden', '40'],
c:[
{ id: 1, name: "Mark" },
{ id: 2, name: "John" },
{ id: 3, name: "Franc" },
{ id: 4, name: "Andrew " }
]
}

如何在 Angular''' 中使用 *ngFor 循环迭代上面的数组

Answer 1

*ngFor指令期望Array object 循环。 这就是您收到错误消息的原因。

You can use keyvalue pair pipe to loop over this object, basically that will convert an object to an array, which would have key and value in separate object properties.

由于进行了严格模板检查，因此 typescript 正在引发错误。 要修复/抑制该错误，您可以使用定义类型arr: {[key: string]: any} 。

TS

arr: {[key: string]: any} = {
  a: ...,
  b: ...,
}

HTML

<div *ngFor="let item of arr | keyvalue">
  <b>{{ item.key }}</b>

  <div *ngFor="let val of item.value">
    {{ val.name ?? val }}
  </div>
</div>

堆栈闪电战