我正在为我的站点添加一个自动完成选择字段而苦苦挣扎。我想用我的 mongoDB 中的值填充一个自动完成选择字段。为了检索这些值,我正在使用我的函数:
component.ts
this.availableFirmware = [];
this.terminalService.getFirmware().subscribe(firmware => {
this.availableFirmware = firmware.firmware;
component.html
<select class="form-control" id="sel2" [(ngModel)]="firmware" name="firmware">
<option *ngFor="let firmware of availableFirmware" [value]="firmware._id">
{{firmware.name}}
</option>
</select>
到目前为止,这有效,但我需要该字段是搜索所有内容的自动完成选择字段。所以如果我的数组是这样的:
[
'John Doe',
'Christian Bale'
'Jenny Doehler'
]
我希望函数在我输入 oe
时返回 John Doe
和 Jenny Doehler
。
到目前为止,我所做的是包含来自 http://material.angular.io 的 Angular Material 2 .我找到了那里的例子enter link description here但这也不能解决它,因为我在管道等方面遇到了一些错误。pp。我无法使用从我的 MongoDB 中提取的数据创建一个简单的自动完成选择字段。
希望有人可以帮助我!
作为进一步的信息:这部分代码->
this.availableFirmware = [];
this.terminalService.getFirmware().subscribe(firmware => {
this.availableFirmware = firmware.firmware;
console.log(this.availableFirmware);
});
产生这个输出:我想在我的自动完成字段中显示名称。这也是我的过滤器功能不起作用的原因,因为 this.availableFirmware 是一个对象,我对如何拆分自动完成所需的部分中的任何内容感到困惑。
最佳答案
看看Adding a Custom Filter您引用的页面示例。
打开StackBlitz例如,那里的代码看起来几乎是您想要的,除了索引测试应该是 > -1
而不是 === 0
。
ngOnInit() {
this.filteredOptions = this.myControl.valueChanges
.pipe(
startWith(''),
map(val => this.filter(val))
);
}
filter(val: string): string[] {
return this.options.filter(option =>
option.toLowerCase().indexOf(val.toLowerCase()) > -1);
}
(可惜提供的StackBlitz不能在线使用,但是如果你想在本地玩可以导出)。
您的代码
至于将示例与您的代码集成,请添加 async
管道,因为 filtersOptions 是可观察管道,而不是静态数组。
我假设选项列表是在初始化时仅从 MongoDB 中获取的,因此您的代码将如下所示。
我不认为 select
很容易适应自动完成功能,所以如果您对 Angular Material 没问题,请坚持使用 Angular Material StackBlitz 示例中的模板。
模板
<form class="example-form">
<mat-form-field class="example-full-width">
<input type="text" placeholder="Pick one" aria-label="Number" matInput
[formControl]="myControl" [matAutocomplete]="auto"
[(ngModel)]="selectedName">
<mat-autocomplete #auto="matAutocomplete">
<mat-option *ngFor="let firmware of filteredOptions | async" [value]="firmware.name">
{{ firmware.name }}
</mat-option>
</mat-autocomplete>
</mat-form-field>
</form>
组件
@Component({
...
})
export class MyComponent {
myControl: FormControl = new FormControl();
availableFirmware = [];
filteredOptions: Observable<any[]>;
selectedFirmware = null;
selectedName = '';
ngOnInit() {
this.terminalService.getFirmware().subscribe(firmware => {
this.availableFirmware = firmware.firmware;
}
this.filteredOptions = this.myControl.valueChanges
.pipe(
startWith(''),
map(val => this.filter(val))
);
}
filter(val: any): any[] {
return this.availableFirmware.filter(firmware => {
return firmware.name.toLowerCase().indexOf(val.toLowerCase()) > -1;
});
}
}
关于mongodb - Angular Material 2 使用 Angular 5 自动完成,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47795012/