Я перебираю динамический объект, используя "* ngFor" и "Keyvalue" pipe.объект имеет один массив объектов obj

Question

Я разрабатываю угловое приложение, и мне нужно пройтись по объекту, который выглядит следующим образом

{ "id":"0", "practiceName":null, "phone":"201-224-6430", "billingAccounts":[{ "number":"10-140195" }] }

Я использовал keyvalue pipe в ng следующим образом

       *ngFor="let item of user | keyvalue"
        <label>{{item.key}} </label>
        <p> {{item.value}} </p>

я получаю вывод следующим образом

billingAccounts [object Object]<br> id 0 phone 201-224-6430

мне нужно перебрать массив

billingAccounts 'number':"10-140195" как это любезно помочь

Answer 1

Используя ngTemplate, см. Пример в stackblitz

<ng-container *ngTemplateOutlet="value;context:{$implicit:user}"></ng-container>

<ng-template #value let-object>
    <div *ngFor="let item of object | keyvalue">
        <ng-container *ngIf="isArray(item.value)">
      <p>{{item.key}}:</p>
      <div style="'margin-left':10rem" *ngFor="let element of item.value">
            <ng-container *ngTemplateOutlet="value;context:{$implicit:element}"></ng-container>
      </div>
        </ng-container>
        <ng-container *ngIf="!isArray(item.value)">
            <p><label>{{item.key}} </label>
         {{item.value}} 
      </p>
    </ng-container>
  </div>
</ng-template>

Обновление Я забыл сказать, что нам нужна функция isArray в .ts

isArray(variable:any)
{
    return Array.isArray(variable)
}

Answer 2

вы можете попробовать вот так

<div *ngFor="let item of user | keyvalue">
     <span *ngIf="item.key === 'billingAccounts'; else elsePart"> 
       <div *ngFor="let data of item.value; let i = index;">
        <label>{{data.number}} </label>
       </div>
     </span>
     <ng-template #elsePart>
         <label>{{item.key}} </label>
          <p> {{item.value}} </p>
     </ng-template>

</div>

Answer 3

Это потому, что значение является массивом.

Самый быстрый (но самый уродливый) способ заставить его работать:

<label>{{item.key}} </label>
<p *ngIf="item.key !== 'billlingAccounts'; else billingAccounts"> {{item.value}} </p>
<ng-template #billingAccounts>
  <p *ngFor="let billing of item.value">
    {{ billing.number }}
  </p>
</ng-template>

Но опять же, это очень уродливо и ужасная практика.

Кроме этого, вы должны предоставить воспроизводимый пример вашей проблемы и указать конечную цель, чтобы получить лучшую помощь.