Angular 9 `*ngFor` 不適用於對象的 `Array`

Question

在 ts 文件中，我有這樣的數據：

app.component.ts

 this.images = [{
     asset_id: 'asset_id',
     asset_name: 'asset_name'
 }];

和html模板如下：

應用程序組件.html

test {{images}}
<div *ngFor="let img of images; index as i">
  dddd--<span>{{img.asset_id}}</span>
</div>

結果如下所示：

我在這里做的錯誤是什么？

Answer 1

您有一個包含一個項目的object array 。 所以，試試這個：

id: {{images[0]["asset_id"]}}
name: {{images[0]["asset_name"]}}

<div *ngFor="let img of images">
    <span>{{ img.asset_id  }}</span>
</div>

我在Stackblitz上為您創建了一個示例

Answer 2

test [object Object]是 bcz 您試圖在沒有迭代的情況下打印數組。

要在不迭代的情況下打印對象數組，我們需要使用索引來訪問數組值或使用json管道來打印對象或對象數組。

// output: test [ { "asset_id": "asset_id", "asset_name": "asset_name" } ]
test {{ images | json }}

或使用數組索引訪問

{{ images[0].asset_id }}
{{ images[0].asset_name }}
...