我的HTML
<div class="row">
<div class="input-field col s10">
<div class="form-group">
<div formArrayName="sensors_id">
<div *ngFor="let sensor of addHomeboxPForm.get('sensors_id').value; let i = index">
<br>
<input formControlName="{{i}}" type="text" placeholder="Select Sensor" aria-label="Number" matInput [matAutocomplete]="auto">
<mat-autocomplete autoActiveFirstOption #auto="matAutocomplete" [displayWith]="displayWith">
<mat-option (onSelectionChange)="updateForm($event, [sensor.sensors_id], 'sensors_id')" *ngFor="let sensor of filteredOptionsS | async" [value]="sensor.sensor_serial">
{{sensor.sensor_serial}}
</mat-option>
</mat-autocomplete>
<div class="button-left">
<button *ngIf="addHomeboxPForm.controls.sensors_id.value.length > 1" type="button" class="fa" (click)="onRemoveItem(i)">RemoveSensor</button>
</div>
</div>
</div>
</div>
我的过滤器:
private _filterS(value: string): Sensors[] {
const filterValue = value.toString().toLowerCase();
return this.sensors.filter(sensors => sensors.sensor_serial.toLowerCase().indexOf(filterValue) === 0);
}
this.filteredOptionsS = this.addHomeboxPForm.get('sensors_id').valueChanges.pipe(
startWith(''),
map(value => this._filterS(value))
);
我提交时会得到下拉菜单和功能,但是每次我键入字符或退格键时搜索都不会起作用,并且焦点会消失!