Как изменить идентификатор кликаемого изображения

Question

Я хочу изменить идентификатор выбранного изображения при клике.В настоящее время нажатие на одно изображение повлияет на все изображения с [id] = "available".Как я могу изменить для конкретного изображения. Вот мой HTML

    <ion-row>
    <ion-avatar *ngFor="let seat of row1.seats; let i=index;" id="item- 
    {{i}}">
    <ion-label>{{seat.label}}</ion-label>    
    <img *ngIf="seat.booked===true" src="assets/st.png" id="booked"> 
    <img *ngIf="seat.booked===false" src="assets/st.png" 
    [id]="available" (click)="selectedSeat(seat.id)">
    </ion-avatar>
   </ion-row>

Вот TS.

available = "available";

  selectedSeat(id) {
    this.available = "selected";
  }

CSS:

  #available {
    background-color: cornsilk;
  }
  #selected {
    background-color: #614056;
  }

Answer 1

Похоже, что вы хотите изменить background-color для элемента, созданного ngFor, с индексом, когда этот индекс выбирается с помощью функции selectedSeat().

Если это так, я бы сказал, чтобы полностью игнорировать элемент id и использовать вместо него class.

Вы можете начать с использования функции selectedSeat(), чтобы принять индекс элемента шаблона, а также seat.id, затем изменить переменную available на что-то вроде currentlySelectedSeat на текущий выбранный ngFor индекс элемента:

currentlySelectedSeat = 0;  // <-- default to first index (if you wish)
selectedSeat(seatId, index) {
  if (index) {  // <-- basic check
    this.currentlySelectedSeat = index;  // <-- assign id
  }
  // do whatever else with seatId
}

Если вы немного измените свой CSS, чтобы определить classes вместо ids, например:

.available {
  background-color: cornsilk;
}
.selected {
  background-color: #614056;
}

.. вы можете использовать троицу в ngClass и структурировать ваш шаблон следующим образом:

<ion-row>
  <ion-avatar *ngFor="let seat of row1.seats; index as i;">  // <-- id not necessarily needed. index still assigned to i, just written differently
    <ion-label>{{seat.label}}</ion-label>    
    <img *ngIf="seat.booked===true" src="assets/st.png" class="booked">  // <-- unless there will only ever be one of these images, use class instead of id
    <img *ngIf="seat.booked===false" src="assets/st.png" 
      [ngClass]="currentlySelectedSeat === i ? 'selected' : 'available'"  // <-- *this line clarified below
      (click)="selectedSeat(seat.id, i)">  // <-- expand function to accept template index as well.
  </ion-avatar>
</ion-row>

* Уточненная строка шаблона ngClass: это то же самое, что и запись:

if (available === i) {  // <-- if the variable named available's value is the same as the index which was passed through selectedSeat() on click
  return 'selected';  // <-- give ngClass a string which corresponds to .selected
} else {
  return 'available';  // <-- give ngClass a string which corresponds to .available

Answer 2

Вы можете использовать setAttribute() из Renderer2 и ссылку на шаблон следующим образом:

В шаблоне добавить #myImg к img тегу:

<img *ngIf="seat.booked===false" src="assets/st.png #myImg (click)="selectedSeat(myImg, seat.id)">

В компоненте (.ts), введите Renderer2 и используйте его в методе selectedSeat:

constructor(private renderer: Renderer2){}

selectedSeat(seletctedSeat: ElementRef, id) {
    this.renderer.setAttribute(seletctedSeat.nativeElement, 'id', 'selected');
}

! НО!

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

В файле .ts:

selectedSeat(seletctedSeat: ElementRef, id) {
    this.renderer.addClass(seletctedSeat.nativeElement, 'selected');
}

В CSS:

.selected {
    background-color: #614056;
}

---

ОБНОВЛЕНИЕ

Вы можете создать массив и добавить к нему выбранные идентификаторы.Затем проверьте, содержит ли массив seat.id:

В шаблоне:

<img *ngIf="seat.booked===false" src="assets/st.png" 
    [ngClass]="selectedSeatList.includes(seat.id) ? 'selected' : 'available'" (click)="toggleSelection(seat.id)">

В файле компонента (.ts):

selectedSeatList: Array<number> = [];

toggleSelection = (seatID) => {
    if(this.selectedSeatList.includes(seatID)){
       this.selectedSeatList = this.selectedSeatList.filter(id => id !== seatID);
    }else{
       this.selectedSeatList.push(seatID);
    }
}