Я новичок в угловой. Я пытаюсь отобразить объект Json в компоненте. Я использую keyvalue pipe с *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:

 {amp}lt;div *ngFor="let obcategories of users | keyvalue"{amp}gt; {amp}lt;div *ngFor="let obcategory of obcategories.value | keyvalue"{amp}gt; {amp}lt;div *ngFor="let nestedobcategory of obcategory.value | keyvalue"{amp}gt; {{nestedobcategory.value}} {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; 

Он отображает все как значение id значение name . Я хочу отображать только name значения.

Любая помощь очень ценится.

Вы можете использовать {{nestedobcategory.value.name}} для доступа к свойству name:

 {amp}lt;div *ngFor="let obcategories of users | keyvalue"{amp}gt; {amp}lt;div *ngFor="let obcategory of obcategories.value | keyvalue"{amp}gt; {amp}lt;div *ngFor="let nestedobcategory of obcategory.value | keyvalue"{amp}gt; {{nestedobcategory.value.name}} {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; 

Рабочая Демо

Изменить:

 {{ nestedobcategory.value }} 

Для того, чтобы:

 {{ nestedobcategory.value.name }} 

Код после изменений:

 {amp}lt;div *ngFor="let nestedobcategory of obcategory.value | keyvalue"{amp}gt; {{ nestedobcategory.value.name }} {amp}lt;/div{amp}gt; 

Рабочая Демо

Незначительное изменение будет:

nestedobcategory.value ={amp}gt; nestedobcategory.value.name

IMP: В таких случаях используйте JsonPipe просто чтобы проверить, какой объект вы получаете. Если вы используете

 {{ nestedobcategory.value | json }} 

Он отобразит ваши объекты в структуре JSON (пара ключ / значение), а затем вы сможете получить доступ к значениям, которые вы хотите отобразить в HTML.