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