Как обновить значение, используя угловой материал после выбора значения? - PullRequest
Новая
       18

Как обновить значение, используя угловой материал после выбора значения?

0 голосов
/ 30 сентября 2019

Я бы хотел использовать угловой материал Datepicker для выбора дат. После того, как дата выбрана, я хотел бы обновить значение. Приведенный ниже код работает (т.е. значение обновляется), если я что-то набираю в поле ввода Datepicker, но не при выборе даты с помощью переключателя Datepicker.

Мое лучшее предположение, что я должен использовать что-то отличное от (input)="updateDate($event)" в html.

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;
  }

Ответы [ 2 ]

2 голосов
/ 30 сентября 2019 
<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;
}
1 голос
/ 30 сентября 2019

вы можете использовать changeDetectorRef, см. Этот пример: -> в onChange-событии-обнаружении явным является триггерный процесс. Смотрите этот пример также на моем веб-сайте. 

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>

Надеюсь, вы сможете работать с этим подходом!

...