CODEWITHSUNDEEP
arraysangularloopsconditional-statements
Maryam Gharibi
Maryam Gharibi

Reputation: 571

angularjs2 conditional *ngfor

I wanna show json data in the client . If server sends an array, it can be handled by *ngfor="item of items", but server can send one row json that can not be implemented with *ngfor, because with *ngfor we can just have an array. How can implement conditional *ngfor:

<div *ngFor="let item of (Array.isArray(items) ? items : [items])

I want to check items variable , if it is array type, items should be used as an array , otherwise one row jason

Thanks in advance

Upvotes: 1

Views: 623

Answers (2)

Maryam Gharibi
Maryam Gharibi

Reputation: 571

Thanks for your help. As you recommend I tried following code and it works 

  <div [ngSwitch]="items.length > 0">
   <div *ngSwitchCase="true">
    <div *ngFor="let item of  items">
        <md-checkbox
             [checked]= "item[valueKey] == trueValue"
             [disabled]="disabled"
             align="start"
             (change)="onChange($event,item,valueKey)"
             (onInputFocus)="onFocus()">
                {{item[labelKey]}}
     </md-checkbox>
  </div>


    <md-checkbox
             [checked]= "items[valueKey] == trueValue"
             [disabled]="disabled"
             align="start"
             (change)="onChange($event,items,valueKey)"
             (onInputFocus)="onFocus()">
      {{items[labelKey]}}
   </md-checkbox>
 </div>

Upvotes: 0

Kunso Solutions
Kunso Solutions

Reputation: 7630

I would suggest you to create two divs with *ngIf statement, and use ngFor in case server returns an array.

<div *ngIf="Array.isArray(items)" *ngFor="let item of items">{{item}}</div>
<div *ngIf="!Array.isArray(items)">{{items | json}}</div>

It gives better understanding from first sight what is going on in code. Hope it will help

Upvotes: 1

Related Questions