angular 选项捕获点击数据

Question

我在选项中插入了时间扫描，当我 select 时间我想重用这个数据但是当我打印事件时它告诉我未定义

HTML

        <mat-label>Scegli l'orario</mat-label>
          <mat-select #hasBackdrop >
            <mat-option [value]="false" *ngFor="let times of time">
              <div class="hourTime" (click)="click($event)">{{formatTime(times.time)}}</div>
          </mat-option>
        </mat-select>
      </mat-form-field>

TS

time = []; 

ngOnInit() {
    this.time = this.getHours('15', '09:00:00');
  }

formatTime(time) {
  const H = +time.substr(0, 2);
  const h = H % 18 || 18;
  const ampm = (H < 8 || H === 10) ? ' AM' : ' PM';
  return h + time.substr(2, 3);
}

getHours(step, yourTime) {
  if (!step) {
    return [];
  }
  const slotArray = [];
  const startMinutes = yourTime ? this.howManyMinutesPassed(yourTime) : 0;
  const parsedSlotSize = parseInt(step.toString(), 10);
  for (let i = startMinutes; i <= 18 * 60; i += parsedSlotSize) {
    slotArray.push({
      time: this.convertMinutesToTimeFormat(i),
      minutes: i,
    });
  }
  return [...slotArray];

}

howManyMinutesPassed(time) {
  const [hour, minutes] = time.split(':').map((value) => parseInt(value, 10));
  return hour * 60 + minutes;
}

public convertMinutesToTimeFormat(mins) {
  let h: string | number = Math.floor(mins / 60);
  let m: string | number = mins % 60;
  h = h < 10 ? '0' + h : h;
  m = m < 10 ? '0' + m : m;
  return `${h}:${m}:00`;
}

click(event) {
  this.a = event.value;
  console.log(this.a); //undefined
}

我该怎么做才能没有这种不确定的数据？非常感谢:)

Answer 1

div 的点击事件没有值。但是，mat-select的selectionChange事件持有一个MatSelectionChange Model，它确实包含一个值。我不认为你的价值应该是 false。我猜你想用它来定义预选，为此请参考选择属性。

https://material.angular.io/components/select/api#MatSelect

<mat-select #hasBackdrop (selectionChange)="click($event)">
  <mat-option *ngFor="let times of time" [value]="times">
    <div class="hourTime">{{formatTime(times.time)}}</div>
  </mat-option>

另请注意，模板表达式中的函数调用被认为是不好的做法。 https://medium.com/showpad-engineering/why-you-should-never-use-function-calls-in-angular-template-expressions-e1a50f9c0496

angular 选项捕获点击数据

angular option captures data on click

html

typescript

angular-material

angular

angular8