为什么在使用event.target时元素ID没有得到？

Question

当我单击按钮时，我试图获取元素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>

Typescript方法，用于计算星号上的比率。

  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));
  }

Answer 1

这有点棘手。一件事是您在按钮元素内有i标签。如果您单击i标签，它将提供id，否则为id。 在html中使用按钮标记中的id

<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;

  }

Answer 2

我解决了这个问题，其想法是当我单击按钮时，它将返回null，因为我正在获取ID。

getRate(event: Event) {
    //this.ratesArray.push((((event.target as Element).id as unknown) as number) * 20);
    if ((event.target as Element).id == null) {
      console.log((event.target as Element).closest("a").id);
    } else {
      console.log((event.target as Element).id);
    }
    console.log((((event.target as Element).id as unknown) as number));
  }

    <a (click)="getRate($event)" id="1"><i class="far fa-star" id="1"></i></a>
    <a (click)="getRate($event)" id="2"><i class="far fa-star" id="2"></i></a>
    <a (click)="getRate($event)" id="3"><i class="far fa-star" id="3"></i></a>
    <a (click)="getRate($event)" id="4"><i class="far fa-star" id="4"></i></a>
    <a (click)="getRate($event)" id="5"><i class="far fa-star" id="5"></i></a>