Скрыть сообщение об ошибке, если массив содержит элементы в angular4 - PullRequest
Новая
       12

Скрыть сообщение об ошибке, если массив содержит элементы в angular4

0 голосов
/ 17 мая 2018

Я хочу показать сообщение, если данные не найдены. Я написал логику для этого, и это работает. Тем не менее, он также отображает сообщение, когда является некоторые данные. Я понятия не имею, почему это не работает должным образом. Любая помощь будет высоко ценится.

Логика в моем компоненте машинописи 

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;        
        }
    });
}

Это HTML-файл: 

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

Ответы [ 2 ]

0 голосов
/ 17 мая 2018

У вас может быть способ сделать это, как указано ниже в вашем компоненте 

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>
0 голосов
/ 17 мая 2018

Вы не должны подписываться на ваш http, наблюдаемый каждый раз, когда вы выполняете поиск, вы создаете утечку памяти таким образом, см .: http://brianflove.com/2016/12/11/anguar-2-unsubscribe-observables/

Попробуйте: 

employees = Observable<any[]>;
constructor( ) {
}

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.employees = this.httpClient.post<Employee[]>('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>
...