更改使用ngFor的按钮内的文本

Question

在我的NativeScript应用程序中，我尝试使用* ngFor来显示用户在单独屏幕上选择的播放器数量。这将说“玩家1，玩家2等”然后，当他们点击该按钮选择一个播放器时，我希望能够更改显示“播放器...”的文本来说出所选择的播放器名称。正如你所看到的，我尝试使用document.getElementById来选择元素，但是一旦到达那里就不太确定如何更改文本。

这是我正在尝试做的简化示例。我已经简化了它，以便不是读取用户的输入（大小），它只是设置为6.此外，我没有播放器列表或任何东西，我只是想尝试更改按钮的文本在这一刻的任何事情。一旦我弄清楚如何做到这一点，其余的将很容易。

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

任何帮助，将不胜感激！

Answer 1

It's better to use index to identify the item in ngFor

在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

Answer 2

嗯，我猜在移动设备中不存在文件，这就是为什么它不适合你。我会这样做：

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

Answer 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