How to iterate an Object using *ngFor Angular

May 27, 2022

I have an array of objects that looks like

[
     {sn: 'N300W150726', merchantName: ' test', __typename: 'GetTpeByUser'}
     {sn: 'N300W150726', merchantName: 'alex', __typename: 'GetTpeByUser'}
     {sn: 'N300W150726', merchantName: 'alexa', __typename: 'GetTpeByUser'}
]

I want to display the merchantName in button text and send the sn through the function

<nb-card [size]="'medium'" *ngIf="!toggle">
      <nb-card-header>
        <div class="col-lg-6">Point de vente</div>
      </nb-card-header>
      <nb-card-body>
        <nb-list>
          <nb-list-item *ngFor="let item of nameUsersByTpe">
            <!-- FILTER ARRAY -->
            <button nbButton (click)="getTpeByUser(item.sn)">
              {{ item.merchantName}}
            </button>
          </nb-list-item>
        </nb-list>
      </nb-card-body>
    </nb-card>

this code returns nothing , is there any solution ??

>Solution :

Do you see totally nothing? Then check toggle variable. Is the list not showing? Then check the nameUsersByType Array. BTW: the array elements are not separated by commas. Is this true? Then look there for your answer