Question

我正在尝试制作大约10个空白行，因此它将与其旁边的<div>对称。

现在我有：

<tbody>
    <tr *ngFor="let officeInfo of officeInformation">
        <td>{{officeInfo.supervisorOffice}}</td>
        <td>{{officeInfo.office}}</td>
        <td>{{officeInfo.command}}</td>
    </tr>
    </tbody>

我试过了

<tbody>
        <tr *ngFor="let officeInfo of officeInformation + 10">
            <td>{{officeInfo.supervisorOffice}}</td>
            <td>{{officeInfo.office}}</td>
            <td>{{officeInfo.command}}</td>
        </tr>
        </tbody>

这不起作用。找不到任何关于如何实现它的文档。

------------------------------更新1 --------------- -------------

我注意到我应该使用@Pipe

我这样做：

从“@ angular / core”导入{Pipe，PipeTransform};

@Pipe({ name: 'emptyArray' })
export class EmptyArrayPipe implements PipeTransform {
    transform(value, size: number) {
        return new Array(size).fill(0);
    }
}

然后在我的循环中添加它：

<tr *ngFor="let officeInfo of officeInformation | emptyArray:10">
            <td>{{officeInfo.supervisorOffice}}</td>
            <td>{{officeInfo.office}}</td>
            <td>{{officeInfo.command}}</td>
        </tr>

但是现在只打印出一张空表。

Answer 1

<tbody>
    <tr *ngFor="let officeInfo of officeInformation + 10">
        <td>{{officeInfo.supervisorOffice}}</td>
        <td>{{officeInfo.office}}</td>
        <td>{{officeInfo.command}}</td>
    </tr>
    <tr *ngFor="let dummy of empty">
        <td></td>
        <td></td>
        <td></td>
    </tr>

</tbody>

class MyComponent {
  empty = new Array(10).fill(null);
}

<强>更新

这样就会填充行，这样即使officeInformation包含较少的项目，也总会有10行：

@Pipe({name: 'fillRows'}) 
export class FillRowsPipe{ 
  transform(value, size: number) { 
    if(!value || !size) {
      size = 10;
    }
    var missing = size - (value ? value.length : 0);
    if(missing < 0) {
      return null;
    }
    return new Array(missing).fill(null); 
  }
}

<tbody>
    <tr *ngFor="let officeInfo of officeInformation + 10">
        <td>{{officeInfo.supervisorOffice}}</td>
        <td>{{officeInfo.office}}</td>
        <td>{{officeInfo.command}}</td>
    </tr>
    <tr *ngFor="let dummy of officeInformation|fillRows:10">
        <td></td>
        <td></td>
        <td></td>
    </tr>
</tbody>

Answer 2

您必须向officeInformation数组添加一些空对象。我建议使用添加新空行的getter：

class MyController {
  retrieveOfficeInformation() {
    this.officeInformation = // data for the office
    // before adding more empty rows, check if the last row has any data
    if (this.officeInformation[this.officeInformation.length - 1].id) {
      this.officeInformation = this.officeInformation.concat([
        // empty objects go here
        {},
        {}
      ]);
    }
  }
}

在* ngFor循环中创建空行

2 个答案: