Question

我正在尝试添加最少的行。即使组列表少于3个，也应添加空行。

  <ng-template ngFor let-au [ngForOf]="GROUP_AU_LIST" let-i="index" >
    <tr>
      <td>  <p-checkbox name="auname" [value]="au.auId" [(ngModel)]="au.checked"></p-checkbox>      </td>
      <td>{{au.auShortName}}</td>
    </tr>
    <ng-template *ngIf="i<3">
      <tr *ngFor="let dummy of ' '.repeat(rem).split(''), let x = index">
        <td></td>
        <td></td>
      </tr>
    </ng-template>

  </ng-template>

Answer 1

老实说，我只是懒惰地走了，做成了3个空的<tr>，每个*ngIf都检查了GROUP_AU_LIST的长度。

<ng-template>
  <tr *ngFor="let au of GROUP_AU_LIST">
    <td><p-checkbox name="au.name" [value]="au.auId" [(ngModel)]="au.checked"></p-checkbox></td>
    <td>{{au.auShortName}}</td>
  </tr>
  <tr *ngIf="GROUP_AU_LIST.length < 3"><td></td><td></td></tr>
  <tr *ngIf="GROUP_AU_LIST.length < 2"><td></td><td></td></tr>
  <tr *ngIf="GROUP_AU_LIST.length < 1"><td></td><td></td></tr>
</ng-template>

Answer 2

您可以根据拥有的数组类型推送空对象或空字符串，直到获得length=3

public GROUP_AU_LIST = ['one'];
constructor() {
    while(this.GROUP_AU_LIST.length < 3){
       this.GROUP_AU_LIST.push('');
    }
}

html

<table> 
   <tr *ngFor="let au of GROUP_AU_LIST; let x = index">
        <td>{{au}}</td>
   </tr>
</table>

Answer 3

您是否考虑在计数小于3的数组中添加一个将空对象追加到列表的管道？然后，您可以使用单个* ngFor并确保至少有3行。

Answer 4

您可以在打字稿文件中创建一个表，并使用您想要的任意3个值rows[]=[1,2,3]对其进行初始化。

之后，在tr的{{1}}标签中循环：table

那肯定会在您的表中至少显示3行。

如何在角度* ngFor循环中使最小表第3行

4 个答案: