En mi código, tengo un contenedor que muestra una lista y puedes elegir un elemento de él. Quiero que pueda completar automáticamente lo que estoy escribiendo para que pueda elegir cosas fácilmente. Pero en este momento, no realiza la función de autocompletar. Aquí está mi código. ¿Qué tiene de malo y qué debo hacer?

HTML:

 <ng-container matColumnDef="Product"> <th mat-header-cell *matHeaderCellDef> Ürün </th> <td *matCellDef="let row; let i = index"> <span *ngIf="EditIndex != i">{{row.Product?.StockIntegrationCode + ' - ' + row.Product?.ProductName}}</span> <mat-form-field *ngIf="EditIndex == i" class="w-100-p"> <input type="text" required matInput name="Product"[(ngModel)]="row.Product" (input)="onProductSearchChange($event.target.value)" [matAutocomplete]="autoProduct"> <mat-autocomplete autoActiveFirstOption #autoProduct="matAutocomplete" [panelWidth]="500" [displayWith]="displayProduct.bind(this)"> <mat-option *ngFor="let dp of products" [value]="dp"> {{dp.StockIntegrationCode +' - '+ dp.ProductName}} </mat-option> </mat-autocomplete> </mat-form-field> </td> </ng-container>

TS:

 products: IProduct[]; product: IProduct; productList: IProduct[]; onProductSearchChange(search: string) { let filterValue = (search as any).toLocaleLowerCase("tr"); if ( this._contractService.productList && this._contractService.productList.length > 0 ) { this.productList = this._contractService.productList.filter( (x) => x.StockIntegrationCode.indexOf(filterValue) >= 0 || (x.ProductName as any) .toLocaleLowerCase("tr") .indexOf(filterValue) >= 0 ); } if (!search) { this.product = null; this.productList = this._contractService.productList; } } displayProduct(product: IProduct): string | undefined { return product ? product.StockIntegrationCode + " - " + product.ProductName : ""; }