在 Angular 組件中顯示嵌套的 Json

Question

我是角度的新手。 我正在嘗試在組件中顯示 Json 對象。 我使用的keyvalue管與*ngFor實現這一目標。

我的 Json 對象

{
  "categories": [
    {
      "categories": {
        "id": 1,
        "name": "Delivery"
      }
    },
    {
      "categories": {
        "id": 2,
        "name": "Dine-out"
      }
    },
    {
      "categories": {
        "id": 3,
        "name": "Nightlife"
      }
    },
    {
      "categories": {
        "id": 4,
        "name": "Catching-up"
      }
    },
    {
      "categories": {
        "id": 5,
        "name": "Takeaway"
      }
    }
  ]
}

我的組件 HTML：

<div *ngFor="let obcategories of users | keyvalue">
    <div *ngFor="let obcategory of obcategories.value | keyvalue">
        <div *ngFor="let nestedobcategory of obcategory.value | keyvalue">
            {{nestedobcategory.value}}
        </div>
    </div>
</div>

它顯示所有id值和name值。 我只想顯示name值。

任何幫助深表感謝。

Answer 1

您可以使用{{nestedobcategory.value.name}}訪問 name 屬性：

<div *ngFor="let obcategories of users | keyvalue">
    <div *ngFor="let obcategory of obcategories.value | keyvalue">
        <div *ngFor="let nestedobcategory of obcategory.value | keyvalue">
            {{nestedobcategory.value.name}}
        </div>
    </div>
</div>

工作演示

Answer 2

改變：

{{ nestedobcategory.value }}

到：

{{ nestedobcategory.value.name }}

修改后的代碼：

<div *ngFor="let nestedobcategory of obcategory.value | keyvalue">
      {{ nestedobcategory.value.name }}
</div>

工作演示

Answer 3

一個小的變化是：

nestedobcategory.value => nestedobcategory.value.name

IMP ：在這種情況下，使用JsonPipe只是為了檢查您獲得的對象。 如果你使用

{{ nestedobcategory.value | json }}

它將在 JSON 結構（鍵/值對）中顯示您的對象，然后您可以訪問要在 HTML 上顯示的值。