在Angular组件中显示嵌套的Json

Question

我是新手。我试图在组件中显示Json对象。我使用带有* 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”值。我只想显示“名称”值。非常感谢您的帮助。

Answer 1

尝试这样：

<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>

Working Demo

Answer 2

Working Example

在您的位置

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

to-> {{nestedobcategory.value.name}}

Answer 3

只有很少的变化nestedobcategory.value=> nestedobcategory.value.name

IMP：在这种情况下，使用json管道只是为了检查您得到的对象。如果使用

{{nestedobcategory.value | json}}

它将显示您的对象，然后您可以访问所需的值