如何解决使用Array <Object>的角材料自动完成
我有以下Stackblitz: AutoComplete - StackBlitz
一旦用户选择一个选项,然后清除输入并开始输入,过滤就会停止。
解决方法
它停止工作,因为您在rxjs流中遇到错误。
value
可以是string
或option
对象。您必须通过map
运算符正确映射它:
代替
.pipe(
startWith(''),map(value => this._filter(value))
);
尝试以下操作:
.pipe(
startWith(''),map(value => typeof value === 'string' ? value : value.address),map(address => address ? this._filter(address) : this.options.slice())
);
中的 显示值自动完成 示例
更新
OP认为此实现存在问题:
我再次分叉了您,并添加了一个按钮,以方便使用。如果你 选择一个选项,单击“继续”,将邮政编码中的“ 0”退格, 单击继续,将零添加回输入中,单击继续。这个 给您未定义的https://stackblitz.com/edit/angular-material-autocomplete-eg-4w15ki?file=app/autocomplete-filter-example.html
但是,如果您检查材料文档,则它会按预期工作,因为角度材料自动完成https://github.com/angular/components/issues/3334中没有匹配或强制选择功能
这意味着,如果您正在键入且键入的字符串与自动完成中的值完全匹配,则FormControl值仍将是字符串,不是您期望的对象。
为了强制执行此操作,您可以创建一个简单的指令,例如:
@Directive({
selector: "[forceSelection]"
})
export class AutocompleteForceSelectionDirective implements AfterViewInit,OnDestroy {
@Input() matAutocomplete: MatAutocomplete;
@Input('forceSelection') key: string;
private destroyed$ = new Subject();
constructor(
@Host() @Self() private autoCompleteTrigger: MatAutocompleteTrigger,private ngControl: NgControl
) {}
ngAfterViewInit() {
this.autoCompleteTrigger.panelClosingActions
.pipe(
filter(e => !e || !e.source),takeUntil(this.destroyed$)
)
.subscribe(e => {
const selected = this.matAutocomplete.options
.map(option => option.value)
.find(option => (this.key ? option[this.key] : option) === this.ngControl.value);
if (selected) {
this.ngControl.control.setValue(selected);
}
});
}
ngOnDestroy() {
this.destroyed$.next();
}
}
并将其应用于您的输入
<input ... [matAutocomplete]="auto" forceSelection="address">
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。