【问题标题】：Changing the text inside my button that uses an ngFor更改使用 ngFor 的按钮内的文本
【发布时间】：2019-02-15 14:02:40
【问题描述】：

在我的 NativeScript 应用程序中，我尝试使用 *ngFor 在单独的屏幕上显示用户选择的玩家数量。这将显示“玩家 1、玩家 2 等”。然后，当他们单击该按钮选择一名球员时，我希望能够将“球员...”的文字更改为所选球员的姓名。如您所见，我尝试使用 document.getElementById 选择元素，但不太确定在到达那里后如何更改文本。

这是我正在尝试做的一个简化示例。我已经简化了它，而不是读取用户的输入（大小），它只是设置为 6。另外，我没有出现玩家列表或任何东西，我只是想更改按钮的文本对此刻的任何事情。一旦我弄清楚如何做到这一点，剩下的就很容易了。

https://play.nativescript.org/?template=play-ng&id=67JcNJ&v=5

任何帮助将不胜感激！

【问题讨论】：

标签： angular nativescript angular2-nativescript

【解决方案1】：

在ngFor中最好使用index来标识item

在home.component.html，

<Button [text]="(i == this.selectedIndex)? 'Player ' + key + ' is selected' : 'Player ' + key" *ngFor="let key of playersArray; let i = index;" (tap)="selectPlayer(i)"></Button>

在home.component.ts，添加这些

public selectedIndex = -1;

public selectPlayer(index) {
  this.selectedIndex = index;
}

附注应该避免在 Angular 中直接接触 DOM

【讨论】：

【解决方案2】：

嗯，我猜移动设备中不存在文档，这就是它不适合您的原因。我会这样做：

public selectPlayer(id): void {
    this.playersArray[id - 1] = "Player Name";
  //document.getElementById(id + "player").innerText = "Player Name";
}

【讨论】：

【解决方案3】：

您可以简单地将$event 对象传递给tap 事件处理程序并执行event.object.text 来更新按钮文本。但是由于您在按钮元素上有一个属性绑定，因此它可能会在更改检测周期中从数组更改回实际值。所以this.playersArray[id - 1] = "Player Name"; 可以工作，除非您不想更改源数组。

event.object 将是被点击的按钮。它不是 HTML 按钮，因此您不能使用 HTML 特定属性。查看Button component 了解所有可用的属性列表。

另外，document.getElementById 是特定于 HTML 的，从父视图来看它应该是 .getViewById('yourViewId')。您可能想了解 {N} 个组件的基础知识。

Updated Playground

【讨论】：