在template-driven form中使用FormArray时，可以在组件中动态添加和删除表单控件。但是当FormArray与Material Table一起使用时，出现了一些问题。如果使用ngFor循环遍历FormArray，则在添加或删除表单控件时，会导致表格中的数据行重新排序，而不是更新。

为了解决这个问题，可以对FormArray中的每个控件添加一个唯一标识符，并将其绑定到表格中的每一行。这样，在添加或删除表单控件时，表格中的数据行就可以正确地更新，而不会重新排序。

以下是一些示例代码：

组件 TS 文件：

import { Component } from '@angular/core';
import { FormArray, FormBuilder, FormControl, FormGroup } from '@angular/forms';
import { MatTableDataSource } from '@angular/material/table';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  form: FormGroup;
  dataSource = new MatTableDataSource([]);
  displayedColumns = ['name', 'age', 'actions'];

  constructor(private fb: FormBuilder) {
    this.buildForm();
    this.addTableRow();
  }

  buildForm() {
    this.form = this.fb.group({
      people: this.fb.array([])
    });
  }

  addTableRow() {
    const people = this.form.get('people') as FormArray;
    people.push(
      this.fb.group({
        name: '',
        age: ''
      })
    );
    this.updateTable();
  }

  deleteTableRow(index: number) {
    const people = this.form.get('people') as FormArray;
    people.removeAt(index);
    this.updateTable();
  }

  updateTable() {
    const people = this.form.get('people') as FormArray;
    this.dataSource.data = people.controls.map((control, index) => ({
      id: `row-${index}`,
      name: control.get('name').value,
      age: control.get('age').value
    }));
  }

  save() {
    console.log(this.form.value);
  }