单击事件返回未定义。为什么？答案

【问题标题】：Click event return undefined. Why?单击事件返回未定义。为什么？
【发布时间】：2021-02-04 08:44:13
【问题描述】：

我正在尝试传递从 mat-option 选项中获取的日期，但是当在 mat-option 标签中时，我将 click 方法与事件一起打印并打印它返回的事件 undefined! 我该如何解决？

HTML

    <mat-drawer-content class="Font">
      <mat-form-field appearance="fill">
        <mat-label>choose the date
        </mat-label>
        <mat-select [(value)]="selected">
          <mat-option value="option1" (click)="onclick($event)">{{this.shareDate.newCurrentDate}}</mat-option>
          <mat-option value="option2" (click)="onclick($event)">{{this.shareDate.newTomorrow}}</mat-option>
        </mat-select>
      </mat-form-field>
      <mat-form-field >
        <mat-label>choose the time
        </mat-label>
        <mat-select #hasBackdrop>
          <mat-option [value]="false" *ngFor="let time of dayaHours">
            <div class="hourTime">{{formatTime(time.time)}}</div>
          </mat-option>
        </mat-select>
      </mat-form-field>
    </mat-drawer-content>
  </mat-drawer-container>

onclick(event) {
  console.log(event.value); // undefined
}

【问题讨论】：

你试过看看什么是事件吗？ console.log(event);
是的，给我一个鼠标事件
里面有value吗？您应该将其添加到您的问题中。
event.value 不确定，事件给我一个鼠标事件
event.target.value ?

标签： typescript angular-material angular8

【解决方案1】：

你想做的事情是不可能的，因为点击事件没有任何价值。替代方案我建议您执行以下操作：

<mat-option #matOption1 (click)="onClick(matOption1.value)" [value]="'GB'">Great Britain</mat-option>

我也创建了Stackblitz。

更多信息您可以阅读：https://angular.io/guide/template-reference-variables

【讨论】：