CODEWITHSUNDEEP
jsonangulartypescript
Jolosin
Jolosin

Reputation: 43

Angular looping values individually

In my component.ts I have something like this

  testOptions: SelectItem[] = Object.keys(TestEnum).map(a => {
    return { label: this.translate.instant('TestEnum.' + a), value: a };
  });

test.enum.ts:

export enum TestEnum {
 A = 'A',
 B = 'B',
 C = 'C',
}

"translate" uses a json file in my case en.json:

"TestEnum": {
    "test1": "Test 1",
    "test2": "Test 2",
    "test3": "Test 3",

my component.html looks like this:

   <ng-template #tBody let-row="row">
     <td class="iconLinkColumn">
       <span *ngIf="!isRowMenuDisabled(row)" class="newton-more" [title]="'common.options' | translate"
         style="padding-bottom: 8px;" (click)="toggleRowMenu($event, rowMenu, row)"></span>
     </td>
     <td>
       <span *ngFor="let f of avrFlagOptions">
         {{ f.label}}
       </span>
     </td>

When I start my angular app I am getting displaying all of my json names in each row of my table. How is it possible to loop the values individually, so that in row one appears Test 1 and in row two appears Test 2?

Upvotes: 0

Views: 79

Answers (1)

Jamie Vangeysel
Jamie Vangeysel

Reputation: 121

Very sure testOptions is an KeyValue Array and I cannot see a ngFor in your code.

This I believe will do the trick. Answer:

<si-newton-section>
 <cc-scrollable-table>
    <ng-template #tBody let-row="row">
     <td class="iconLinkColumn" *ngFor="let option of testOptions | keyvalue">
       <span *ngIf="!isRowMenuDisabled(row)" class="newton-more" [title]="'common.options' | translate"
         style="padding-bottom: 8px;" (click)="toggleRowMenu($event, rowMenu, row)"></span>
     <td>{{option.value}}</td>
   </ng-template>
 </cc-scrollable-table>
</si-newton-section>

Upvotes: 1

Related Questions