如何更改点击图片的id

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() of 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 class 如果你只想改变样式而不是应用任何逻辑（比如用选定的座位做一些事情），如下：

在 .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

当通过 selectedSeat() 函数选择该索引时，您似乎想更改具有索引的 ngFor 创建的元素的 background-color。

如果这是准确的，我会说完全忽略元素的 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

How to change the id of clicked image

css

angular

ionic4