Angular 4：将空表行动态添加到表中

Question

我有一张桌子，每个 td 都有一张桌子，它被放置在这样的组件中

<tr *ngFor="let row of data">
    <td>
        <custom-table [tableData]="row.rec?.observations" [maxLengthArray]="maxLengthArray"></custom-table>
    </td>
    <td>
        <custom-table [tableData]="row.rec?.gaps" [(maxLengthArray)]="maxLengthArray"></custom-table>
    </td>
    <td>
        <custom-table [tableData]="row.rec?.recommendation" [(maxLengthArray)]="maxLengthArray"></custom-table>
    </td>

自定义表格组件是

<table style="border-collapse: collapse;">
    <tr *ngFor="let rec of tableData">
        <td>{{rec}}</td>
    </tr>
</table>

组件

export class CustomTableComponent implements OnInit {

    @Input() public tableData: any;
    @Input() public maxLengthArray: number[];
    public tdLeangth: number = 0;

    public ngOnInit() {
      let len = this.maxLengthArray[0] - this.tableData.length;
      while (len === 0) {
          this.tableData.push('');
          len--;
      }
   }
}

maxLengthArray 具有自定义表格组件可以拥有的最大行数，我想将空行添加到计数小于最大长度的自定义表格中。但是每次 ngOnInit 都会被调用，并且只有最后一列有空行。如何解决这个问题？

Answer 1

您可以在“输入”中使用 getter 和 setter 在输入中进行操作

_tableData:any
_maxLenghtArray:number[0]
@Input()
  set tableData(value) {
    this._tableData=value;
    if (this._maxLenghtArray)
         this.addRows()
  }
  get tableData()
  {
     return this._tableData;
  }
@Input()
  set maxLenghtArray(value) {
    this._maxLenghtArray=value;
    if (this._tableData)
        this.addRows()

  }
  get maxLenghtArray()
  {
     return this._maxLenghtArray;
  }

addRows()
{
   while (this.tableData.lenght<this.maxLengthArray[0])
       this.tableData.push('');
}