我想通过表中的for循环显示键值对，tr标签。我想在一行中显示 3-4 对。
在此处添加我的代码-https://stackblitz.com/edit/angular-ivy-hrqira?file=src/app/app.component.ts
我想在一行中分别显示 4 个值。用这个链接更新了我的问题。
<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 是我的地图，包含不同的值。
【问题讨论】：
标签： html css html-table ngfor angular-ng-if
<table>
<tr><td *ngFor="let table of uiFields | keyvalue"><label>{{table.key}}</label><label>{{table.value}}</table></td>
</tr>
</table>
【讨论】：
我尝试了另一种方法来检查这是否适合您
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' },
],
];
}
【讨论】：