角动态表

Question

我正在尝试以角度构建形式，以便用户可以在表中输入数字。行的数量和列的数量可能不同（Nrows，ncolumns），但用户不可编辑。 预期的结果应该是这样的：

对于我正在使用formarray的行，NGFOR正在工作。 但是我无法在列上迭代。 也许我的方法反正不好？

// transport-form.component.ts
export class TransportFormComponent implements OnInit {

  title = 'formarray';
  kostenForm!: FormGroup;
  rows!: FormArray;
  nRows = 3;
  nColumns = 3;
  constructor(private formBuilder: FormBuilder) {}
  ngOnInit() {
    this.kostenForm = new FormGroup({
      rows: new FormArray([]),
    });
    for (let i = 0; i < this.nRows; i++) {
      this.addItem();
    }
  }
  createItem(): FormGroup {
    let row = {};
    for (let j = 0; j < this.nColumns; j++) {
      row[`v${j}`] = '';
    }
    return this.formBuilder.group(row);
  }
  addItem(): void {
    this.rows = this.kostenForm.get('rows') as FormArray;
    this.rows.push(this.createItem());
  }
}

// transport-form.component.html
<div [formGroup]="kostenForm">  
<div formArrayName="rows"  
  *ngFor="let row of kostenForm.get('rows')['controls']; let i = index;">  
  <div [formGroupName]="i">  
    <!-- <ng-container *ngFor="let control of row.controls; let j = index">
    <input formControlName="v{j}">??? 
</ng-container> Does not work -->
<!-- Workaround to demonstrate expected output: -->
    <input formControlName="v0">  
    <input formControlName="v1">  
    <input formControlName="v2">  
  </div>  
</div>  
</div>  
{{ kostenForm.value | json }}

Answer 1

由于声誉较低，我无法发表评论，所以我添加了答案。

长话短说，如果您有各种各样的数组，则可以创建formarrays的形式。

您可以在本文的接受答案中找到所有解释：

Angular-Formarray：从二维JavaScript数组中创建表格

在帖子中他使用2x2数据阵列，但我认为您可以将其调整为所需的。