在* ngFor循环中创建空白行

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> 

，并没有奏效。找不到有关如何实现它的任何文档。

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

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

我做它像这样：

进口{管，PipeTransform } from“@ angular/core”;

@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); 
} 

更新

这样的行会充满这样，总是有10行，即使officeInformation含有较少的项目：

@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阵列添加一些空对象。我会建议使用一个吸气剂，增加新的空行：

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