Question

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

<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('');
}

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

1 个答案: