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

Question

I am working on Project . Using angular material auto-complete.Its working accurately.My problem is that i want to bind data while i select specific data from list but i don't know how to bind it.

i tried [(ngModel)] but all in vain

.html Code

<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 file code

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

try add "(optionSelected)" and check inside your component file that what is happening

<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 File add event and check what is happening when you select an item

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

Answer 2

@Malik, the example is a bit confused. The idea is that you has an observable this.myControl1.valueChanges, this observable, return not the value change else a "map" of this value -map transform the value you entered in an array of options-.

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