要解决Angular mat chips自动完成不起作用的问题,可以参考以下解决方法。
import { MatAutocompleteModule, MatChipsModule } from '@angular/material';
{{ chip }}
{{ option }}
import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';
import { Observable } from 'rxjs';
import { startWith, map } from 'rxjs/operators';
@Component({
selector: 'app-chip-autocomplete',
templateUrl: './chip-autocomplete.component.html',
styleUrls: ['./chip-autocomplete.component.css']
})
export class ChipAutocompleteComponent {
chipControl = new FormControl();
chips: string[] = ['Apple', 'Banana', 'Orange'];
allOptions: string[] = ['Apple', 'Banana', 'Orange', 'Grapes', 'Mango'];
filteredOptions: Observable;
constructor() {
this.filteredOptions = this.chipControl.valueChanges.pipe(
startWith(''),
map(value => this._filter(value))
);
}
private _filter(value: string): string[] {
const filterValue = value.toLowerCase();
return this.allOptions.filter(option => option.toLowerCase().includes(filterValue));
}
}
通过以上步骤,你应该能够解决Angular mat chips自动完成不起作用的问题,并实现自动完成功能。