Почему идентификатор элемента не получается при использовании event.target?

Question

Я пытаюсь получить идентификатор элемента, когда нажимаю на кнопку, но иногда этот идентификатор не получается. код ниже, я использую машинописный текст!

изображение ниже!

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

Метод машинописного текста для расчета ставки, набранной по звездному идентификатору.

  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

Я решил, идея в том, что когда я нажимаю на кнопку, она возвращает ноль, потому что я получаю идентификатор.

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>

Answer 2

Это немного сложно. Во-первых, у вас есть тег i внутри кнопки element.Если вы нажмете на тег i, он даст идентификатор, в противном случае - нет. в 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;

  }