如果数组中有angular4中的元素，则隐藏错误消息

如果找不到数据，我想显示一条消息。我已经为这一点编写了逻辑，它是有效的。但是，当存在一些数据时，它也会显示消息。我不知道为什么它不能正常工作。任何帮助都将不胜感激

我的typescript组件中的逻辑

validation: boolean; 
employees = [];
constructor( ) {
    this.validation = false;
}
searchEmployee(name: string): void {
    var config = {
        headers: {
            'Content-Type': 'application/json'
        }
    };
    const empName = name;
    let obj = { empNamewers: empName }
    let body = JSON.stringify(obj);
    let headers = new HttpHeaders();
    headers = headers.append('Content-Type','application/json');
    this.httpClient.post<Employee[]>('sercvicesUrl', body, config).subscribe( employees => {
        this.employees = employees;
        console.log(employees);
        if(this.employees.length === 0){
            this.validation=true;
        }
        else{
            this.validation=false;        
        }
    });
}

canShowErrors() {
    return (this.employees == null || this.employees.length === 0);
}

验证：布尔；
雇员=[]；
构造函数（）{
此项验证=错误；
}
searchEmployee（名称：字符串）：无效{
变量配置={
标题：{
“内容类型”：“应用程序/json”
}
};
const empName=名称；
设obj={empNamewers:empName}
让body=JSON.stringify（obj）；
let headers=新的HttpHeaders（）；
headers=headers.append（'Content-Type'，'application/json'）；
this.httpClient.post（'sercvicesUrl'，body，config）.subscribe（employees=>{
这是。雇员=雇员；
控制台日志（员工）；
if（this.employees.length==0）{
这个。验证=真；
}
否则{
验证=假；
}
});
}

这是一个HTML文件：

 <button (click)="searchEmployee(searchBox.value);">Search</button>
 <div *ngIf="validation">
<h4>Sorry, No results</h4>
</div>

搜索
对不起，没有结果

您不应该订阅http observable每次执行搜索时，您都以这种方式创建内存泄漏，请参阅：

尝试：

员工=可观察；
构造函数（）{
}
searchEmployee（名称：字符串）：无效{
变量配置={
标题：{
“内容类型”：“应用程序/json”
}
};
const empName=名称；
设obj={empNamewers:empName}
让body=JSON.stringify（obj）；
let headers=新的HttpHeaders（）；
headers=headers.append（'Content-Type'，'application/json'）；
this.employees=this.httpClient.post（'sercvicesUrl'，body，config）
}

在HTML中：

<button (click)="searchEmployee(searchBox.value);">Search</button>
 <div *ngIf="!(employees | async)?.length">
<h4>Sorry, No results</h4>
</div>

搜索
对不起，没有结果

并显示它们：

<div *ngFor="let e of employees | async">
    ...
</div>

...

您可能有一种方法来完成此操作，如下组件中所示

validation: boolean; 
employees = [];
constructor( ) {
    this.validation = false;
}
searchEmployee(name: string): void {
    var config = {
        headers: {
            'Content-Type': 'application/json'
        }
    };
    const empName = name;
    let obj = { empNamewers: empName }
    let body = JSON.stringify(obj);
    let headers = new HttpHeaders();
    headers = headers.append('Content-Type','application/json');
    this.httpClient.post<Employee[]>('sercvicesUrl', body, config).subscribe( employees => {
        this.employees = employees;
        console.log(employees);
        if(this.employees.length === 0){
            this.validation=true;
        }
        else{
            this.validation=false;        
        }
    });
}

canShowErrors() {
    return (this.employees == null || this.employees.length === 0);
}

从HTML中，您应该调用

<button (click)="searchEmployee(searchBox.value);">Search</button>
 <div *ngIf="canShowErrors()">
<h4>Sorry, No results</h4>
</div>

搜索
对不起，没有结果

您是否尝试过此

*ngIf=“validation==true”

。它工作了吗？？？是的，它不工作。请尝试

*ngIf=“employees.length==0”

。它在页面加载时第一次工作，之后在单击时不工作。您昨天已经问过同样的问题