我之所以这样问，是因为我开始学习一些基本的角度课程，并且在我使用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 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)
答案 0 :(得分：2)
使用 updateOn FormHooks
报告AbstractControl的更新策略（表示事件 控件将对其进行自我更新）。可能的值：'change'| '模糊'| 'submit'默认值：'change
component.ts
Using global .NET SDK
----------------------------------------
Setup
----------------------------------------
branch : master
pre-release label :
version : 0.1.0.0
version suffix :
informational : 0.1.0+1.Branch.master.Sha.e333ebb1284752e0e62ed4e9637961dce3aac501
========================================
Clean
========================================
========================================
Build
========================================
Microsoft (R) Build Engine version 15.9.20+g88f5fadfbe for .NET Core
Copyright (C) Microsoft Corporation. All rights reserved.
Restoring packages for D:\IdentityServer4\IdentityServer4\src\IdentityServer4.csproj...
D:\IdentityServer4\IdentityServer4\src\IdentityServer4.csproj : warning NU1604: Project dependency IdentityModel does not contain an inclusive lower bound. Include a lower bound in the dependency version to ensure consistent restore results.
D:\IdentityServer4\IdentityServer4\src\IdentityServer4.csproj : warning NU1604: Project dependency IdentityServer4.Storage does not contain an inclusive lower bound. Include a lower bound in the dependency version to ensure consistent restore results.
D:\IdentityServer4\IdentityServer4\src\IdentityServer4.csproj : warning NU1604: Project dependency Microsoft.AspNetCore.Authentication does not contain an inclusive lower bound. Include a lower bound in the dependency version to ensure consistent restore results.
D:\IdentityServer4\IdentityServer4\src\IdentityServer4.csproj : warning NU1604: Project dependency Microsoft.AspNetCore.Authentication.Cookies does not contain an inclusive lower bound. Include a lower bound in the dependency version to ensure consistent restore results.
D:\IdentityServer4\IdentityServer4\src\IdentityServer4.csproj : warning NU1604: Project dependency Microsoft.AspNetCore.Authentication.OpenIdConnect does not contain an inclusive lower bound. Include a lower bound in the dependency version to ensure consistent restore results.
D:\IdentityServer4\IdentityServer4\src\IdentityServer4.csproj : warning NU1604: Project dependency Microsoft.AspNetCore.Authorization does not contain an inclusive lower bound. Include a lower bound in the dependency version to ensure consistent restore results.
D:\IdentityServer4\IdentityServer4\src\IdentityServer4.csproj : warning NU1604: Project dependency Microsoft.AspNetCore.Cors does not contain an inclusive lower bound. Include a lower bound in the dependency version to ensure consistent restore results.
D:\IdentityServer4\IdentityServer4\src\IdentityServer4.csproj : warning NU1604: Project dependency Microsoft.Extensions.Caching.Memory does not contain an inclusive lower bound. Include a lower bound in the dependency version to ensure consistent restore results.
D:\IdentityServer4\IdentityServer4\src\IdentityServer4.csproj : warning NU1604: Project dependency Microsoft.Extensions.Logging does not contain an inclusive lower bound. Include a lower bound in the dependency version to ensure consistent restore results.
D:\IdentityServer4\IdentityServer4\src\IdentityServer4.csproj : warning NU1604: Project dependency Microsoft.Extensions.Options.ConfigurationExtensions does not contain an inclusive lower bound. Include a lower bound in the dependency version to ensure consistent restore results.
D:\IdentityServer4\IdentityServer4\src\IdentityServer4.csproj : warning NU1604: Project dependency Microsoft.SourceLink.GitHub does not contain an inclusive lower bound. Include a lower bound in the dependency version to ensure consistent restore results.
D:\IdentityServer4\IdentityServer4\src\IdentityServer4.csproj : warning NU1604: Project dependency System.IdentityModel.Tokens.Jwt does not contain an inclusive lower bound. Include a lower bound in the dependency version to ensure consistent restore results.
D:\IdentityServer4\IdentityServer4\src\IdentityServer4.csproj : warning NU1604: Project dependency System.Security.Cryptography.Cng does not contain an inclusive lower bound. Include a lower bound in the dependency version to ensure consistent restore results.
D:\IdentityServer4\IdentityServer4\src\IdentityServer4.csproj : error NU1103: Unable to find a stable package Microsoft.SourceLink.GitHub with version
D:\IdentityServer4\IdentityServer4\src\IdentityServer4.csproj : error NU1103: - Found 7 version(s) in nuget.org [ Nearest version: 1.0.0-beta-62905-03 ]
D:\IdentityServer4\IdentityServer4\src\IdentityServer4.csproj : error NU1103: - Found 0 version(s) in Microsoft Visual Studio Offline Packages
D:\IdentityServer4\IdentityServer4\src\IdentityServer4.csproj : warning NU1701: Package 'IdentityModel 1.0.0' was restored using '.NETFramework,Version=v4.6.1' instead of the project target framework '.NETStandard,Version=v2.0'. This package may not be fully compatible with your project.
D:\IdentityServer4\IdentityServer4\src\IdentityServer4.csproj : warning NU1701: Package 'System.IdentityModel.Tokens.Jwt 1.0.0' was restored using '.NETFramework,Version=v4.6.1' instead of the project target framework '.NETStandard,Version=v2.0'. This package may not be fully compatible with your project.
Generating MSBuild file D:\IdentityServer4\IdentityServer4\src\obj\IdentityServer4.csproj.nuget.g.props.
Generating MSBuild file D:\IdentityServer4\IdentityServer4\src\obj\IdentityServer4.csproj.nuget.g.targets.
Restore failed in 946.03 ms for D:\IdentityServer4\IdentityServer4\src\IdentityServer4.csproj.
Build FAILED.
D:\IdentityServer4\IdentityServer4\src\IdentityServer4.csproj : warning NU1604: Project dependency IdentityModel does not contain an inclusive lower bound. Include a lower bound in the dependency version to ensure consistent restore results.
D:\IdentityServer4\IdentityServer4\src\IdentityServer4.csproj : warning NU1604: Project dependency IdentityServer4.Storage does not contain an inclusive lower bound. Include a lower bound in the dependency version to ensure consistent restore results.
D:\IdentityServer4\IdentityServer4\src\IdentityServer4.csproj : warning NU1604: Project dependency Microsoft.AspNetCore.Authentication does not contain an inclusive lower bound. Include a lower bound in the dependency version to ensure consistent restore results.
D:\IdentityServer4\IdentityServer4\src\IdentityServer4.csproj : warning NU1604: Project dependency Microsoft.AspNetCore.Authentication.Cookies does not contain an inclusive lower bound. Include a lower bound in the dependency version to ensure consistent restore results.
D:\IdentityServer4\IdentityServer4\src\IdentityServer4.csproj : warning NU1604: Project dependency Microsoft.AspNetCore.Authentication.OpenIdConnect does not contain an inclusive lower bound. Include a lower bound in the dependency version to ensure consistent restore results.
D:\IdentityServer4\IdentityServer4\src\IdentityServer4.csproj : warning NU1604: Project dependency Microsoft.AspNetCore.Authorization does not contain an inclusive lower bound. Include a lower bound in the dependency version to ensure consistent restore results.
D:\IdentityServer4\IdentityServer4\src\IdentityServer4.csproj : warning NU1604: Project dependency Microsoft.AspNetCore.Cors does not contain an inclusive lower bound. Include a lower bound in the dependency version to ensure consistent restore results.
D:\IdentityServer4\IdentityServer4\src\IdentityServer4.csproj : warning NU1604: Project dependency Microsoft.Extensions.Caching.Memory does not contain an inclusive lower bound. Include a lower bound in the dependency version to ensure consistent restore results.
D:\IdentityServer4\IdentityServer4\src\IdentityServer4.csproj : warning NU1604: Project dependency Microsoft.Extensions.Logging does not contain an inclusive lower bound. Include a lower bound in the dependency version to ensure consistent restore results.
D:\IdentityServer4\IdentityServer4\src\IdentityServer4.csproj : warning NU1604: Project dependency Microsoft.Extensions.Options.ConfigurationExtensions does not contain an inclusive lower bound. Include a lower bound in the dependency version to ensure consistent restore results.
D:\IdentityServer4\IdentityServer4\src\IdentityServer4.csproj : warning NU1604: Project dependency Microsoft.SourceLink.GitHub does not contain an inclusive lower bound. Include a lower bound in the dependency version to ensure consistent restore results.
D:\IdentityServer4\IdentityServer4\src\IdentityServer4.csproj : warning NU1604: Project dependency System.IdentityModel.Tokens.Jwt does not contain an inclusive lower bound. Include a lower bound in the dependency version to ensure consistent restore results.
D:\IdentityServer4\IdentityServer4\src\IdentityServer4.csproj : warning NU1604: Project dependency System.Security.Cryptography.Cng does not contain an inclusive lower bound. Include a lower bound in the dependency version to ensure consistent restore results.
D:\IdentityServer4\IdentityServer4\src\IdentityServer4.csproj : warning NU1701: Package 'IdentityModel 1.0.0' was restored using '.NETFramework,Version=v4.6.1' instead of the project target framework '.NETStandard,Version=v2.0'. This package may not be fully compatible with your project.
D:\IdentityServer4\IdentityServer4\src\IdentityServer4.csproj : warning NU1701: Package 'System.IdentityModel.Tokens.Jwt 1.0.0' was restored using '.NETFramework,Version=v4.6.1' instead of the project target framework '.NETStandard,Version=v2.0'. This package may not be fully compatible with your project.
D:\IdentityServer4\IdentityServer4\src\IdentityServer4.csproj : error NU1103: Unable to find a stable package Microsoft.SourceLink.GitHub with version
D:\IdentityServer4\IdentityServer4\src\IdentityServer4.csproj : error NU1103: - Found 7 version(s) in nuget.org [ Nearest version: 1.0.0-beta-62905-03 ]
D:\IdentityServer4\IdentityServer4\src\IdentityServer4.csproj : error NU1103: - Found 0 version(s) in Microsoft Visual Studio Offline Packages
15 Warning(s)
1 Error(s)
Time Elapsed 00:00:01.48
An error occurred when executing task 'Build'.
Error: One or more errors occurred. (.NET Core CLI: Process returned an error (exit code 1).)
.NET Core CLI: Process returned an error (exit code 1).
答案 1 :(得分：1)
是的，它将绝对为您服务。您只需从.ts删除vlaueChanges订阅，然后像这样调用您的搜索功能
.ts文件中只需保留此代码
searchForm : FormGroup;
this.searchForm = new FormGroup({
searchField : new FormControl('')
})
myNewSearchMethod(){
// This condition will check if there is some value in `searchField` or not
if(this.searchForm.get('searchField ').value){
// call your search function here
}
}
<input
type="search"
placeholder="Teclee un proveedor..."
[formControl]="campoBusqueda"
(blur)="myNewSearchMethod()"
/>