angular - 是否可以从 ValueChanges 交换到 (blur) 以提出请求?
问题描述
我问这个是因为我开始学习一些基本的角度课程,并且我正在使用一些过滤器,在我使用 ValueChanges 输入时将请求发送到 firebase:
这是用于搜索的输入:
<input
type="search"
placeholder="Teclee un proveedor..."
[formControl]="campoBusqueda"
/>
这是我必须使用的代码ngOnInit()
:
this.campoBusqueda = new FormControl();
this.campoBusqueda.valueChanges.subscribe(term => {
this.busqueda = term;
this.cargando = true;
if (this.busqueda.length !== 0) {
this.proveedoresService
.getProveedoresSearch(this.busqueda)
.subscribe(proveedores => {
this.proveedores = [];
// tslint:disable-next-line: forin
for (const id$ in proveedores) {
const p = proveedores[id$];
p.id$ = id$;
this.proveedores.push(proveedores[id$]);
}
if (this.proveedores.length < 1 && this.busqueda.length >= 1) {
this.noresultados = true;
this.proveedoresService
.getProveedores()
.subscribe( proveedores => {
this.proveedores = [];
// tslint:disable-next-line: forin
for (const id$ in proveedores) {
const p = proveedores[id$];
p.id$ = id$;
this.proveedores.push(proveedores[id$]);
}
});
} else {
this.noresultados = false;
}
});
this.cargando = false;
this.resultados = true;
} else {
this.proveedores = [];
this.cargando = false;
this.resultados = false;
}
});
现在我想知道是否可以使用(模糊):
<input
type="search"
placeholder="Teclee un proveedor..."
[formControl]="campoBusqueda"
(blur)="myNewSearchMethod()"
/>
在用户从输入中获得焦点后发出请求,而不是每次用户在输入中输入内容时发出请求。
我myNewSearchMethod()
正在使用的正确知道是:
myNewSearchMethod() {
this.campoBusqueda = new FormControl();
this.busqueda = this.campoBusqueda.value;
this.cargando = true;
if (this.busqueda.length !== 0) {
this.proveedoresService
.getProveedoresSearch(this.busqueda)
.subscribe(proveedores => {
this.proveedores = [];
// tslint:disable-next-line: forin
for (const id$ in proveedores) {
const p = proveedores[id$];
p.id$ = id$;
this.proveedores.push(proveedores[id$]);
}
if (this.proveedores.length < 1 && this.busqueda.length >= 1) {
this.noresultados = true;
this.proveedoresService
.getProveedores()
.subscribe( proveedores => {
this.proveedores = [];
// tslint:disable-next-line: forin
for (const id$ in proveedores) {
const p = proveedores[id$];
p.id$ = id$;
this.proveedores.push(proveedores[id$]);
}
});
} else {
this.noresultados = false;
}
});
this.cargando = false;
this.resultados = true;
} else {
this.proveedores = [];
this.cargando = false;
this.resultados = false;
};
}
if (this.busqueda.length !== 0) {
现在的问题是,当我使用(模糊)输入值时,如果在控制台中给出下一个堆栈跟踪,则在选项卡或单击输入后给出一个空值时输入的值会消失:
ProveedoresComponent.html:5 ERROR TypeError: Cannot read property 'length' of null
at ProveedoresComponent.push../src/app/proveedores/proveedores/proveedores.component.ts.ProveedoresComponent.myNewSearchMethod (proveedores.component.ts:170)
at Object.eval [as handleEvent] (ProveedoresComponent.html:9)
at handleEvent (core.js:23097)
at callWithDebugContext (core.js:24167)
at Object.debugHandleEvent [as handleEvent] (core.js:23894)
at dispatchEvent (core.js:20546)
at core.js:20993
at HTMLInputElement.<anonymous> (platform-browser.js:993)
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423)
at Object.onInvokeTask (core.js:17280)
解决方案
使用updateOn FormHooks
报告 AbstractControl 的更新策略(表示控件更新自身的事件)。可能的值:'改变' | '模糊' | '提交' 默认值:'更改
组件.ts
campoBusqueda = new FormControl('',{
updateOn:'blur'
});
推荐阅读
- r - 在 R 中绘制 shp 文件的 1 个属性
- semantic-versioning - 设置 @semantic-release 以考虑 CHANGELOG 中的“重构”提交
- excel - 如何让我分配的单元格“路径名”打开它生成的主副本。单元格中的信息在生成时是准确的
- python - 使用 Powershell 获取 Azure Python 函数异常体
- linux - bash:捕获一个中断并将其“转发”到后台进程
- mongodb - Mongodb Atlas命名约定的问题
- mongodb - React Native 和 MongoDB 领域:找到:带键的对象 {$undefined}
- php - 将购物车中的商品插入数据库表
- java - 如何在 PostgreSQL 中检索两个日期之间的行?
- html - 未捕获的 SecurityError:iFrame 上的 DOMException(代码 18)