Angular $ событие не определено для некоторых кликов

Question

Я не могу получить значение $event при нажатии кнопки. Ирония в том, что он показывает одним нажатием кнопки, а не другим.

Компонент HTML

<ng-template ngFor let-item="$implicit" [ngForOf]="eventDetails.eventProducts" let-i="index">
          <div class="kt-section kt-section--space-lg">
              <div class="kt-section__heading">
                <h3>{{ item.productParentTitle }}</h3>
              </div>


              <div class="kt-section__content text-center">
                <div class="row">
                  <div class="center-cont">
                    <div class="col-lg-8 text-left">
                        <div class="kt-cont-center">
                          <p class="pass-count">
                            {{item.productTitle}}
                          </p>
                        </div>
                    </div>
                    <div class="col-lg-2">
                        <div class="kt-cont-center">
                            <span class="pass-price">{{item.productPrice}} AED</span>
                        </div>

                    </div>
                    <div class="col-lg-2">
                        <div class="kt-cont-center text-right">
                            <button type="button" class="btn btn-success" (click)="selectProduct($event)">
                              Select
                            </button>
                          </div>

                    </div>
                  </div>
                </div>

                <div class="row">
                  <div class="col-lg-12">
                      <ngb-accordion class="accordion-light" [closeOthers]="true">
                          <ngb-panel id="pass1" ngbPanelTitle>
                            <ng-template ngbPanelTitle>
                                <i class="fa fa-angle-down" aria-hidden="true"></i>
                            </ng-template>
                            <ng-template ngbPanelContent>
                              <span class="text-left">
                                <div class="tab-cont-wrap">
                                    <div class="row">
                                      <div class="col-sm-8">
                                        <p>
                                          {{ item.accordionDetails.content }}     
                                        </p>
                                      </div>
                                      <div class="col-sm-4">
                                        <div class="outside-price">
                                          <h5>outside price 1900 <span class="currency">aed</span></h5>
                                        </div>
                                      </div>
                                    </div>
                                </div>
                              </span>
                            </ng-template>
                          </ngb-panel>
                        </ngb-accordion>
                  </div>
                </div>

                <div class="kt-separator kt-separator--border-2x separator-margin-top-0"></div>

              </div>
              <div class="kt-section__content text-center">
                  <div class="row">
                    <div class="center-cont">
                      <div class="col-lg-8 text-left">
                          <div class="kt-cont-center">
                            <p class="pass-count">
                              {{item.productTitle}}
                            </p>
                          </div>
                      </div>
                      <div class="col-lg-2">
                          <div class="kt-cont-center">
                              <span class="pass-price">{{item.productPrice}} AED</span>
                          </div>

                      </div>
                      <div class="col-lg-2">
                          <div class="kt-cont-center text-right">
                              <button type="button" class="btn btn-success" (click)="selectProduct(item)">
                                Select
                              </button>
                            </div>

                      </div>
                    </div>
                  </div>

                  <div class="row">
                    <div class="col-lg-12">
                        <ngb-accordion class="accordion-light" [closeOthers]="true">
                            <ngb-panel id="pass1" ngbPanelTitle>
                              <ng-template ngbPanelTitle>
                                  <i class="fa fa-angle-down" aria-hidden="true"></i>
                              </ng-template>
                              <ng-template ngbPanelContent>
                                <span class="text-left">
                                  <p>
                                      {{ item.accordionDetails.content }}     
                                  </p>
                                </span>
                              </ng-template>
                            </ngb-panel>
                          </ngb-accordion>
                    </div>
                  </div>

                  <div class="kt-separator kt-separator--border-2x separator-margin-top-0"></div>

              </div>
          </div>
        </ng-template>

Метод компонента TS

selectProduct(event:any): void {
    // console.log(event.target.closest('.center-cont').className);
    // event.target.closest('.center-cont').className += ' selected'; 
    // event.target.className += ' selected';
    this.rendrer.addClass(event.target, 'selected');
    this.rendrer.addClass(event.target.parentElement.parentElement.parentElement, 'selected');

  }

Конечный результат

Если я нажимаю первую кнопку выбора event, это defined, но при нажатии второй кнопки event появляется undefined.

Кто-нибудь может мне помочь в этом? Я искал и ничего не смог найти.

Answer 1

Я вижу, что при первом щелчке вызывается selectProduct($event), где при втором selectProduct(item).

Возможно, вам следует добавить приведение типа события, если это то, что вам нужно:

selectProduct(event: Event): void {
    // console.log(event);    
}