如何在组件中绑定角材料自动完成数据

马利克·里兹万

我正在研究 Project 。使用角材料自动完成。它的工作准确。我的问题是我想在从列表中选择特定数据时绑定数据，但我不知道如何绑定它。

我试过 [(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)));})
}

约格什·达希亚

尝试添加“（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 文件添加事件并检查选择项目时发生的情况

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。