Изменение текста внутри моей кнопки, которая использует ngFor - PullRequest
Новая
       8

Изменение текста внутри моей кнопки, которая использует ngFor

0 голосов
/ 15 февраля 2019

В моем приложении NativeScript я пытаюсь использовать * ngFor для отображения количества игроков, выбранных пользователем, на отдельном экране.Это будет сказать «Игрок 1, Игрок 2 и т. Д.»Затем, когда они нажимают эту кнопку, чтобы выбрать игрока, я хочу иметь возможность изменить текст с надписью «Игрок ...», чтобы сказать имя выбранного игрока.Как вы увидите, я пытался использовать document.getElementById, чтобы выбрать элемент, но не совсем знал, как изменить текст, когда попал туда.

Вот упрощенный пример того, что я пытаюсь сделать,Я упростил его, так что вместо того, чтобы читать вводимые пользователем данные (размер), он просто устанавливается на 6. Кроме того, у меня не появляется список игроков или что-то еще, и я просто пытаюсь изменить текст кнопкини к чему в этот момент.Остальное будет легко, когда я пойму, как это сделать.

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

Любая помощь будет признательна!

Ответы [ 3 ]

0 голосов
/ 15 февраля 2019

Хм, я предполагаю, что документ не существует в мобильном телефоне, поэтому он не работает для вас.Я бы сделал это: 

public selectPlayer(id): void {
    this.playersArray[id - 1] = "Player Name";
  //document.getElementById(id + "player").innerText = "Player Name";
}
0 голосов
/ 15 февраля 2019

Вы можете просто передать объект $event в обработчик событий tap и выполнить event.object.text, чтобы обновить текст кнопки.Но поскольку у вас есть привязка свойства к элементу кнопки, он может вернуться к фактическому значению из массива во время цикла обнаружения изменений.Так что this.playersArray[id - 1] = "Player Name"; может работать, если вы не хотите изменять исходный массив.

event.object будет нажатой кнопкой.Это не кнопка HTML, поэтому вы не можете использовать определенные свойства HTML.Извлеките Компонент Button для всех доступных списков свойств.

Также document.getElementById относится только к HTML, предполагается, что это .getViewById('yourViewId') от родительского представления.Возможно, вы захотите пройти основы {N} компонентов.

Обновленная игровая площадка

0 голосов
/ 15 февраля 2019

Лучше использовать индекс для идентификации элемента в 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;
}

PS Следует избегать прямого прикосновения к DOM в Angular

...