Кнопка Angular не работает в FormArray - PullRequest
Новая
       2

Кнопка Angular не работает в FormArray

0 голосов
/ 29 января 2020

Я пытаюсь создать простой массив форм, похожий на список ToDo, однако я добавляю кнопку к каждому элементу в списке, чтобы он мог быть удален (хотя и не воссоздавал эту часть в примере).

Я обнаружил, что кнопка для каждого элемента не "кликабельна". Я также заметил, что эффект «ряби» не работает должным образом и на этих кнопках.

Мне удалось создать стекаблитц, чтобы воссоздать его так, что любая помощь будет оценена

https://stackblitz.com/edit/angular6-material-components-demo-ck2jpe

Чтобы использовать просто введите что-то в текстовое поле, нажмите ДОБАВИТЬ, а затем попробуйте удалить его из списка ниже, где оно появилось

1 Ответ

3 голосов
/ 29 января 2020

Проблема в том, что вы не добавляете функцию trackBy в *ngFor. Это делает весь DOM списка воссозданным, когда вы делаете mousedown, так что click никогда не срабатывает, потому что элемент уничтожен.

См. здесь для рабочего примера: 

trackBy(idx: number, item: { id: number }): number {
  return item.id;
}

шаблон: 

<ul formArrayName="items"
    *ngFor="let item of exampleForm.controls.items.value; let i = index;trackBy: trackBy">

Для получения дополнительной информации вы можете прочитать мой ответ на эту тему. В основном происходит то, что ссылка exampleForm.controls.items.value меняется с каждым происходящим событием.

Другим решением может быть использование changeDetection: ChangeDetectionStrategy.OnPush в объявлении компонента. Я рекомендую вам использовать trackBy и OnPush для максимального улучшения производительности. Имейте в виду, что это может потребовать рефакторинга в вашем текущем коде приложения. 

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.scss"],
  changeDetection: ChangeDetectionStrategy.OnPush
})

стек

...