最好使用索引来标识ngFor中的项目

Question

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

这是我正在尝试做的一个简化示例。我对其进行了简化，以便不读取用户输入的内容（大小），而是将其设置为6。此外，我没有播放器列表或其他任何内容，而只是尝试更改按钮的文本此时此刻。一旦我弄清楚怎么做，其余的工作就很容易了。

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

任何帮助将不胜感激！

Answer 1

最好使用索引来标识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;
}

P.S。应该避免直接在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更新按钮文本。但是，由于在button元素上具有属性绑定，因此在更改检测周期中，它可能会从数组更改回实际值。因此，this.playersArray[id - 1] = "Player Name";可以工作，除非您不想更改源数组。

event.object将是被点击的按钮。这不是HTML按钮，因此您不能使用HTML特定的属性。检出Button component中所有可用的属性列表。

document.getElementById也是HTML特有的，从父视图来看，它应该是.getViewById('yourViewId')。您可能需要了解{N}组件的基础知识。

Updated Playground

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

3 个答案:

最好使用索引来标识ngFor中的项目