要在Angular 7中筛选下拉框的值,你可以使用Angular的管道来过滤数据。以下是一个包含代码示例的解决方法:
import { Component } from '@angular/core';
@Component({
selector: 'app-dropdown',
template: `
-
{{option}}
`,
})
export class DropdownComponent {
options = ['Option 1', 'Option 2', 'Option 3', 'Option 4'];
selectedValue: string;
filteredOptions: string[];
constructor() {
this.filteredOptions = this.options;
}
}
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'filter'
})
export class FilterPipe implements PipeTransform {
transform(items: any[], searchText: string): any[] {
if (!items) return [];
if (!searchText) return items;
searchText = searchText.toLowerCase();
return items.filter(item => {
return item.toLowerCase().includes(searchText);
});
}
}
import { FilterPipe } from './filter.pipe';
@Component({
...
providers: [FilterPipe]
})
-
{{option}}
现在,当你在下拉框中选择一个值时,过滤后的选项将在列表中显示出来。