如何在组件中绑定 angular material 自动完成数据

Question

我正在处理项目。使用 angular material auto-complete.Its 工作 accurately.My 问题是我想绑定数据，而我 select 来自列表的特定数据，但我不知道如何绑定它。

我尝试了 [(ngModel)] 但都是徒劳的

.html代码

<mat-form-field class="four-full-width">
  <input type="text" placeholder="Shipment Type" 
     [(ngModel)]="contractvm.shipmenttype" aria-label="Number" matInput 
     [formControl]="myControl1" [matAutocomplete]="auto1">
  <mat-autocomplete #auto1="matAutocomplete" >
   <mat-option *ngFor="let option of filterContractShipmentTypetLov | async" 
     [value]="option">{{option}}
   </mat-option>
  </mat-autocomplete>
</mat-form-field>

.ts文件代码

getContractShipmenttypelov(){    
    this.apiService.getContractShipmenttypelov().subscribe(data =>{
      console.log('getContractShipmenttypelov',data);      
      this.lstContractShipmenttypeDbValue = new Array();
      for (let item of data) {  
        var singleitem: any;
        singleitem = new PortLov();
        singleitem.SHIPMENTTYPEDESCRIPTION = item.SHIPMENTTYPEDESCRIPTION;        this.lstContractShipmenttypeDbValue.push(singleitem.SHIPMENTTYPEDESCRIPTION);} this.filterContractShipmentTypetLov = this.myControl1.valueChanges
.pipe(startWith(''),(value => this.filtershipmenttype(value)));})
}

Answer 1

@Malik，例子有点乱。这个想法是你有一个 observable this.myControl1.valueChanges，this observable，return not the value change else a "map" of this value -map 转换你在选项数组中输入的值-.

this.filterContractShipmentTypetLov = this.myControl1.valueChanges.pipe(
     startWith(''),
     map(value => this.filtershipmenttype(value)));
}
//your function filtershipmenttype
filtershipmenttype(value:string)
{
  value=value.toLowerCase()
  return lstContractShipmenttypeDbValue.filter(x=>x.toLowerCase().includes(value))
}

Answer 2

尝试添加“(optionSelected)”并检查组件文件内部发生了什么

<mat-form-field class="four-full-width">
 <input type="text" placeholder="Shipment Type" 
   [(ngModel)]="contractvm.shipmenttype" aria-label="Number" matInput 
   [formControl]="myControl1" [matAutocomplete]="auto1">
 <mat-autocomplete #auto1="matAutocomplete" 
  ***(optionSelected)="onOptionSelected($event)"***>
 <mat-option *ngFor="let option of filterContractShipmentTypetLov | async" 
   [value]="option">{{option}}
 </mat-option>
</mat-autocomplete>
</mat-form-field>

---------------------TS 文件添加事件并检查当您 select 一个项目

    onOptionSelected(dataOption: any) {
          console.log(dataOption.option.value);
     //set you model here so that your input box get selected value
     }

如何在组件中绑定 angular material 自动完成数据

How can bind angular material auto complete data in component

data-binding

angular-material

angular

two-way-binding

angular7