javascript - 某些点击的角度 $event 未定义

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点击第二个按钮。eventundefined

谁能帮我解决这个问题？我已经搜索过了，找不到任何东西。

标签： javascriptangularangular8

Answer 1

我可以看到它在第一次点击时selectProduct($event)被调用，selectProduct(item)第二次点击它。

如果这是您需要的，也许您应该添加事件类型转换：

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