Angularmat-table中的行内编辑问题。行内字段之间的数据绑定问题。
创始人
2024-10-28 07:01:27
0

为了解决Angular mat-table中的行内编辑问题,可以使用Reactive Forms来设置表单,并使用以下代码来解决行内字段之间的数据绑定问题:

在模板中添加以下代码:


  Field 1
  



  Field 2
  

然后,您需要在组件中设置表单和处理字段更改事件的方法。以下是一个示例实现:

export class MyComponent implements OnInit {
  dataSource: MatTableDataSource;
  form: FormGroup;

  constructor(private fb: FormBuilder) {}

  ngOnInit() {
    this.form = this.fb.group({
      field1: [''],
      field2: [''],
    });

    this.dataSource = new MatTableDataSource([...]);
  }

  onField1Change(row: MyData) {
    row.field1 = this.form.get('field1').value;
    this.dataSource.data = [...this.dataSource.data];
  }

  onField2Change(row: MyData) {
    row.field2 = this.form.get('field2').value;
    this.dataSource.data = [...this.dataSource.data];
  }
}

请注意以下代码中的以下事项:

  • form被设置为使用formBuilder创建的FormGroup
  • (keyup)事件被绑定到每个输入框,并传递行数据作为参数
  • onField1ChangeonField2Change方法将输入框的值分配给数据行,并将更改的数据分配回数据源,以更新表格中的所有行。

通过使用Reactive Forms和以上代码示例,您可以成功地解决Angular mat-table中的行内编辑问题,并且能够在行内字段之间正确地设置数据绑定。

相关内容

热门资讯

透视脚本!aapoker破解侠... 透视脚本!aapoker破解侠是真的吗(透视)插件下载(真是真的有挂)1、超多福利:超高返利,海量正...
透视好牌!pokemmo辅助器... 透视好牌!pokemmo辅助器(透视)爆料教程(2022已更新)(哔哩哔哩);1、下载好pokemm...
透视科技!红龙poker辅助器... 透视科技!红龙poker辅助器免费观看(透视)透明教程(2024已更新)(哔哩哔哩)红龙poker辅...
透视透视挂!aapoker安装... 透视透视挂!aapoker安装包怎么使用(透视)脚本(切实是有挂)1、每一步都需要思考,不同水平的挑...
透视透视!agpoker辅助(... 透视透视!agpoker辅助(透视)系统教程(2024已更新)(哔哩哔哩)agpoker辅助软件透明...
透视安装!aapoker如何设... 透视安装!aapoker如何设置胜率(透视)ai插件(好像有挂)aapoker如何设置胜率软件透明挂...
透视挂!德州圈脚本(透视)必赢... 透视挂!德州圈脚本(透视)必赢方法(2020已更新)(哔哩哔哩)1、德州圈脚本ai辅助优化,德州圈脚...
透视辅助!aapoker怎么设... 透视辅助!aapoker怎么设置提高好牌几率(透视)插件下载(其实存在有挂)aapoker怎么设置提...
透视好友房!德州机器人代打脚本... 透视好友房!德州机器人代打脚本(透视)第三方教程(2026已更新)(哔哩哔哩)1、下载好德州机器人代...
透视规律!aapoker辅助软... 透视规律!aapoker辅助软件合法吗(透视)透视脚本下载(都是有挂)1、首先打开aapoker辅助...