How to display 4 values in every row in html using ngfor and ngif?-CodePudding

I want to display key value pair via for loop in table, tr tag. 3-4 pairs I want to display in one row.

Added my code here- https://stackblitz.com/edit/angular-ivy-hrqira?file=src/app/app.component.ts

I want to display 4 values each in the row. Updated my question with this link.

<table>
<div *ngFor="let table of uiFields | keyvalue">
<tr><td><label>{{table.key}}</label><label>{{table.value}}</table></td>
</tr>
</div>
</table>

I am getting values one below the other, I want to display 3-4 pairs in one line. uiFields is my map containing different values.

CodePudding user response：

    <table>
    <tr><td *ngFor="let table of uiFields | keyvalue"><label>{{table.key}}</label><label>{{table.value}}</table></td>
    </tr>
    </table>

CodePudding user response：

I have tried an alternative method to check if this works for you

codeSolution:https://stackblitz.com/edit/angular-ivy-12fmx9?file=src/app/app.component.ts

HTML

<table>
  <div>
    <tr *ngFor="let items of uiFields">
      <td *ngFor="let table of items">
        <label>{{ table.key }}</label>
        {{ table.value }}
      </td>
    </tr>
  </div>
</table>

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  uiFields = [
    [
      { key: 1, value: 'Rishab' },
      { key: 2, value: 'Ram' },
      { key: 3, value: 'Ramu' },
    ],
    [
      { key: 1, value: 'Rishab' },
      { key: 2, value: 'Ram' },
      { key: 3, value: 'Ramu' },
    ],
    [
      { key: 1, value: 'Rishab' },
      { key: 2, value: 'Ram' },
      { key: 3, value: 'Ramu' },
    ],
  ];
}