Actualmente tengo un campo de entrada que tiene un autocompletado, estoy tratando de tener esencialmente un autocompletado de dos etapas para cada elemento ingresado, por ejemplo, al escribir, mostraría la dirección IP, seleccionando eso ingresa "ipAddress =" en la entrada, luego desea mostrar otro autocompletado en la misma entrada en función de la opción seleccionada para mostrar las direcciones disponibles. Luego agregarían una coma y repetirían para agregar cualquier otro filtro. Simplemente no estoy seguro de cómo se llamaría esto o cómo implementarlo, por lo que cualquier consejo o idea sería muy apreciada.
Prueba algo como esto:
TS:
itemList: any[] = [ { name: "item1", IPForm: new FormControl(), AnotherListValue: [], AnotherForm: new FormControl() }, { name: "item2", IPForm: new FormControl(), AnotherListValue: [], AnotherForm: new FormControl() } ]; // Fill my another value regarding to selected IP onSelectedIP(selected: any, item: any) { this.myService.getListValue(selected.IP).subscribe(result => item.AnotherListValue = result); }HTML
<div *ngFor="let item of itemList"> <mat-form-field> <input type="text" placeholder="Select IP" matInput [matAutocomplete]="itm" [formControl]="item.IPForm"> <mat-autocomplete autoActiveFirstOption #itm="matAutocomplete" [displayWith]="displayFn" (optionSelected)="onSelectedIP($event.option.value, item)"> <mat-option *ngFor="let option of IPList | async" [value]="option"> {{option.IP}} </mat-option> </mat-autocomplete> </mat-form-field> </div>Solo necesita agregar un segundo autocompletar y así sucesivamente