홈>2020-03-18 13:20

javascript - 각도 구성 요소에 중첩 된 Json 표시

각형이 처음입니다. 구성 요소에 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"값을 모두 표시합니다. "이름"값만 표시하고 싶습니다.

도움을 주시면 감사하겠습니다.

javascriptangular

답변 # 1

{{nestedobcategory.value.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>

작업 데모

답변 # 2

변경 :

{{ nestedobcategory.value }}

받는 사람 :

{{ nestedobcategory.value.name }}

변경 후 코드 :

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

작업 데모

답변 # 3
사소한 변경은 다음과 같습니다 :

nestedobcategory.value => nestedobcategory.value.name

IMP :이 경우 JsonPipe 를 사용하십시오. 당신이 얻는 물건을 확인하기 위해. 사용하는 경우
```
{{ nestedobcategory.value | json }}
```
JSON 구조(키/값 쌍)에 객체를 표시 한 다음 HTML에 표시하려는 값에 액세스 할 수 있습니다

Python2.net

javascript - 각도 구성 요소에 중첩 된 Json 표시

관련 자료