>

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

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

  • 답변 # 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에 표시하려는 값에 액세스 할 수 있습니다

관련 자료

  • 이전 android - CustomCalendar 날짜
  • 다음 c# - Telerik RadGrid 작업