* ngFor в кнопке не работает в Angular

#html #angular #for-loop #button #ngfor

#HTML #angular #для цикла #кнопка #ngfor

Вопрос:

У меня есть таблица данных с кнопкой в каждой строке. Эта кнопка работает

 <button mat-raised-button color="primary" (click)="action(car.id)">Action</button>

Я пытаюсь создать кнопку, которая вызывает действие (car.id ) для всех строк таблицы данных, так что для всех car.id

 <button>
    <div *ngFor='let cars of car'>
      <span (click)='this.action(cars.id)'>Action</span>
    </div>
</button>

Кнопка возвращает только ОДИН из идентификаторов
Я попытался изменить его, изменив расположение *ngFor, но он по-прежнему не работает.
Если я помещу *ngFor в тег button, он создаст несколько кнопок, которые будут работать, но мне нужна только одна кнопка, чтобы нажать на нее

1. Вы уверены, что это let cars of car вместо let car of cars ? Кроме того, в функции не должно быть a this , это подразумевается.

2. Я пробовал let car или cars, но в моем случае это cars of car. Это ошибка, но она работает. Также я попытался добавить это. но это ничего не изменило. Он по-прежнему возвращает только один идентификатор

3. Это работает для меня. Stackblitz.

4. Мне нужна уникальная кнопка, которая возвращает car 1, car 2, car 3… У меня также есть тот же результат, что и у вас, несколько кнопок, которые работают отдельно

5. Сейчас я пытаюсь использовать trackBy

Ответ №1:

Внутри вашего компонента ts-файла

 public actionForAll(){
  this.cars.forEach((car) => {
     this.action(car.id)
   });
}

Внутри вашего компонентного HTML-файла

 <button mat-raised-button color="primary" (click)="actionForAll()">Action</button>