如何在 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>

堆棧閃電戰