在* ngFor循环中制作空白行 [英] Make blank rows in a *ngFor loop

问题描述

我正在尝试制作约10个空白行，因此它旁边的< div> 是对称的.

I am trying to make about 10 blank rows so will be symmetric the the <div> next to it.

现在我有:

<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>

，但无效.找不到有关如何实现此目标的任何文档.

and that did not work. There cannot find any doc's on how to achieve it.

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

------------------------------UPDATE 1----------------------------

已经引起我注意，我应该使用 @Pipe

It has been brought to my attention that I should use @Pipe

我正在这样做:

从"@ angular/core"导入{Pipe，PipeTransform}；

import {Pipe, PipeTransform} from "@angular/core";

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

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

Then in my loop I add it:

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

但是现在它只是打印出一个空表.

However now it just prints out an empty table.

推荐答案

<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行:

This way the rows will be filled so that there are always 10 rows even when officeInformation contains less items:

@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>

这篇关于在* ngFor循环中制作空白行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！