Angular 5中无法通过按钮值添加元素问题求助

我来帮你排查下问题所在，其实核心原因是模板里的传参方式不对，咱们一步步来修正：

问题分析 #

1. 模板中不能用this.value：Angular模板的上下文是组件实例，这里的this指向你的组件，而组件并没有value这个属性，所以根本拿不到按钮的值。
2. 数据类型匹配问题：你的buttonTable.rows是string[][]类型，也就是每个row本身就是一个字符串数组，直接把row绑定到按钮的value属性，会被自动转成字符串（比如["a","b"]变成"a,b"），后续再处理反而麻烦。

最优解决方案 #

直接把循环中的row变量作为参数传给addLab方法，不需要绕按钮的value属性，既简洁又不容易出错：

1. 修改按钮模板

<button *ngFor="let row of buttonTable.rows" mat-raised-button class="btn btn-sm" (click)="addLab(row)">
  {{row.join(' ')}} <!-- 把数组转成空格分隔的文本，按钮显示更友好 -->
</button>

这里用row.join(' ')是因为直接显示{{row}}会输出类似["item1","item2"]的字符串，用户体验不好，你可以根据需求调整分隔符（比如逗号）。

2. 调整addLab方法

因为row本身就是string[]类型，直接推到formTable.rows里即可，不需要再包一层数组：

addLab(value: string[]): void {
  this.formTable.rows.push(value);
}

备选方案（如果非要用按钮value属性） #

如果你确实需要通过按钮的value传递数据，可以用属性绑定把数组转成字符串，点击时再转回来：

<button *ngFor="let row of buttonTable.rows" mat-raised-button class="btn btn-sm" [value]="row.join(',')" (click)="addLab($event.target.value.split(','))">
  {{row.join(' ')}}
</button>

这种方式需要额外做字符串和数组的转换，不如第一种方案高效，所以更推荐直接传row变量。

内容的提问来源于stack exchange，提问作者shakell