Попытка очистить Angular Ввод материала при изменении выбора

Question

Здравствуйте, я надеялся получить помощь, чтобы очистить Angular Материал input. У меня выпадающий список ограничен переменной quote. При изменении quote я бы хотел, чтобы мат input был очищен. Любая помощь приветствуется

<select id="quotes" [(ngModel)]="quote">
    <option *ngFor= "let snp_submission of snp_submissions" value={{snp_submission.QuoteNumber}}> {{snp_submission.QuoteNumber}}</option>
</select>

 <input matInput type="text" (keyup)="Keypress($event)" placeholder = "Search Here" class="textbox">

Answer 1

Насколько я понимаю, вы хотите очистить значение input при изменении select. В этом случае используйте (selectionChange) из mat-select. Вот подробный пример:

app.component. html

<mat-form-field appearance="fill">
  <mat-label>Quots</mat-label>
  <mat-select [(ngModel)]="quote" (selectionChange)="doSomething($event)">
    <mat-option *ngFor="let food of foods" [value]="food.value">
      {{food.viewValue}}
    </mat-option>
  </mat-select>
</mat-form-field>
<br>
<mat-form-field appearance="fill">
  <mat-label>Input</mat-label>
  <input matInput type="text" placeholder="Search Here" class="textbox" [value]="inputValue">
</mat-form-field>

app.component.ts

import { Component } from '@angular/core';

interface Food {
  value: string;
  viewValue: string;
}

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})

export class AppComponent {

  quote: any;

  foods: Food[] = [
    {value: 'steak-0', viewValue: 'Steak'},
    {value: 'pizza-1', viewValue: 'Pizza'},
    {value: 'tacos-2', viewValue: 'Tacos'}
  ];

  inputValue = "Hello World";

  doSomething($event){
    // clear input value
    this.inputValue = null;

    // change input value
    //this.inputValue = $event.value;
  }
}