如何使用 ngfor 和 ngif 在 html 的每一行中显示 4 个值？

Question

我想在 table、tr 标签中通过 for 循环显示键值对。我想在一行中显示 3-4 对。

在此处添加我的代码- https://stackblitz.com/edit/angular-ivy-hrqira?file=src/app/app.component.ts

我想在一行中分别显示 4 个值。用这个 link.

更新了我的问题

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

我得到的值一个比另一个低，我想在一行中显示 3-4 对。 uiFields 是我的地图，包含不同的值。

Answer 1

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

Answer 2

我已经尝试了一种替代方法来检查这是否适合您

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>

ts

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' },
    ],
  ];
}