拣货后如何使用角度材料更新值?

Question

我想使用角度材料日期选择器来选择日期。选择日期后，我想更新一个值。如果我在日期选择器的输入字段中键入一些内容，则以下代码有效(即值得到更新(，但在通过日期选择器切换选择日期时则不然。

我最好的猜测是我应该在 html 中使用(input)="updateDate($event)"以外的其他东西。

app.component.html：

<mat-form-field>
<mat-label>Choose start date</mat-label>
<input matInput [matDatepicker]="picker" (input)="updateDate($event)">
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>
</mat-form-field>

app.component.ts：

updateDate(event: any) {
this.exam.date = event.target.value;
}

Answer 1

<mat-form-field>
<mat-label>Choose start date</mat-label>
<input matInput [matDatepicker]="picker" (dateChange)="addEvent($event)"">
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>

TS 示例

addEvent(event: MatDatepickerInputEvent<Date>) {
this.exam.date = event.target.value;
}

Answer 2

您可以使用changeDetectorRef，请参阅以下示例： --> 在 onChange-event 中，detectChange-process 是显式触发的。在我的网站上也可以看到这个例子。

import { Component, OnInit, ChangeDetectorRef } from '@angular/core';
import { CalcComponent } from '../calc-component';
@Component({
selector: 'app-circular-area',
templateUrl: './circular-area.component.html',
styleUrls: ['./circular-area.component.scss']
})
export class CircularAreaComponent implements OnInit {
public render: Boolean;
public radius: number;
public r: number;
constructor(**private cdRef: ChangeDetectorRef**) { }
onChange(event: any, r: number) {
console.log(r);
this.r = Number(r);
this.render = true;
this.cdRef.detectChanges();
this.render = false;
}
ngOnInit() {
this.render = false;
}
}

---

<div class="mat-elevation-z8">
<form  (change)="onChange($event,r.value)">  
<fieldset class="material">
<label>Radius</label>
<hr>
<input #r type="number" placeholder={{radius}} autocomplete="on" value = 5 required> 
</fieldset>
<ng-container *ngIf="!render">
<app-calc-component value={{r.value}} selCalc='circulararea'></app-calc-component>
</ng-container>
</form>
</div>

希望你能用这种方法！