如何使用ng mat-select mat-option从下拉选项中进行选择,然后使用搜索按钮进行搜索?

时间:2019-11-13 11:34:52

标签: javascript angular typescript ngfor angularjs-ng-form

我有一个前端,我想使用ng-option从下拉列表中进行选择,然后使用搜索按钮搜索mrn。

front end

component.html

<form class="form-inline" (ngSubmit)="ngOnInit()" #f="ngForm">
  <mat-form-field>
    <mat-label>Search MRN</mat-label>
    <mat-select>
      <mat-option *ngFor="let SearchMRN of mrn " [value]="SearchMRN.value">
        {{ SearchMRN.viewValue }}
      </mat-option>
    </mat-select>
  </mat-form-field>
  <button type="submit" [disabled]="!f.valid" color="accent">
    <mat-icon>search</mat-icon> Search</button>
    </form>

component.ts

   export interface MRNSearch {
  value: string;
  viewValue: string;
}
 mrn: MRNSearch[] = [
    {value: 'smart-1685497', viewValue: 'smart-1685497'},
    {value: 'smart-1685437', viewValue: 'smart-1685437'},
    {value: 'smart-5485497', viewValue: 'smart-5485497'}
  ];
@ViewChild('f', null) form: NgForm;
async ngOnInit() {
    if (!this.form.valid) {
      return;
    }

0 个答案:

没有答案