基于命名数组的 Angular 按钮命名问题

Question

我在创建的 Angular SPA 组件中遇到按钮命名问题。

上下文 - 我有一个显示数据表的页面，并且有一个“选择”控件，允许用户选择要隐藏在表中的列。当用户选择一列时，该列将被隐藏，并显示相应的按钮，并将列名称作为按钮文本。用户可以选择多个列来隐藏并创建相应的按钮。我的问题是按钮是以最后选择的列名称命名的。

设计 - 我创建了一个数组来保存列信息。

组件 html--

<div *ngFor="let column of columns">
<button class="actionbutton" id="{{columnId}}" (click)="showColumn(selectedColumn)">{{columnName}}</button></div>

组件.ts文件

for (let i = 0; i < this.columnArray.length; i++) {
this.columnId = this.columnArray[i];
this.columnId = this.columnId.replace(' ', '-') + '-' + i;

this.columnName = this.columnArray.splice(0, this.columnArray.length);
this.columns.push(this.columnName);}

我对 Angular 和 Typescript 比较陌生，在解决这个问题时遇到了问题，因此非常感谢任何和所有帮助。

Answer 1

那么，让我尝试解释一下。为了让你的代码显示columnName，你只需要像这样改变你的html（但是你的

columnId

不会工作）：

<div *ngFor="let column of columns">
<button class="actionbutton" id="{{columnId}}" (click)="showColumn(selectedColumn)">{{column}}</button></div>

也就是说，因为

columns

只是一个列名数组。在您的 *ngFor 中，您正在迭代

columns

，因此每个

column

最后都是一个列名称字符串。

除此之外，你的代码中还有一些“不太好的”东西。您的 columns-array 应该是带有参数

id

和

name

的对象数组。然后你可以将你的 html 更改为：

<div *ngFor="let column of columns">
<button class="actionbutton" id="{{column.id}}" (click)="showColumn(selectedColumn)">{{column.name}}</button></div>

此外

this.columnName

表示您正在使用一个全局变量，您正在循环中一遍又一遍地覆盖该变量...但是您将逐步学习:-)