angular - 为什么使用 event.target 时元素 id 没有得到？

Question

当我单击按钮时，我试图获取元素 id，但有时这个 id 没有得到。下面的代码，我正在使用打字稿！

下图！

          <div *ngFor="let item of l">
              <input type="text" class="form-control">
              <button (click)="getRate($event)"><i class="far fa-star" id='1'></i></button>
              <button (click)="getRate($event)"><i class="far fa-star" id='2'></i></button>
              <button (click)="getRate($event)"><i class="far fa-star" id='3'></i></button>
              <button (click)="getRate($event)"><i class="far fa-star" id='4'></i></button>
              <button (click)="getRate($event)"><i class="far fa-star" id='5'></i></button>
          </div>

基于明星 ID 计算速率的打字稿方法。

  getRate(event: Event) {
    this.ratesArray.push((((event.target as Element).id as unknown) as number) * 20);
    console.log((event.target as Element).id);
    console.log((((event.target as Element).id as unknown) as number));
  }

标签： angulartypescriptruntime-error

Answer 1

这有点棘手。一件事是你i在按钮元素中有标签。如果你点击i标签，它会给出id，否则不会。在 htmlid中使用 button 标签

<button (click)="getRate($event)" id='1'><i class="far fa-star" ></i></button>

并从组件

 getRate(event: Event) {
    var target = event.target || event.srcElement || event.currentTarget;
    var id = target.attributes.id;

  }