Question

我想更改单击时所选图像的ID。当前，单击一张图像将影响所有具有[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

您可以使用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属性不是正确的方法。 ID本质上应为唯一，因此您将同一ID分配给多个元素。这听起来是错误的。我认为，如果您只想更改样式但不应用任何逻辑（例如对选定的座位进行某些操作），则应该更改CSS类：

在.ts文件中：

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

在CSS中：

.selected {
    background-color: #614056;
}

更新

您可以创建一个数组并将选定的ID推送到该数组。然后检查数组是否包含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);
    }
}

Answer 2

当通过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

如何更改点击图片的ID

2 个答案: