Невозможно скрыть ошибку msg в angular 4

Question

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

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

  validation: boolean; 

  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>

Answer 1

Можете ли вы попробовать использовать следующий код:

if(this.employees.length > 0){
    //Write you logic here
         this.validation=false;
 }
    else{
          this.validation=true;        
}

Всегда убедитесь, что вы возвращаете пустой массив ('[]') в качестве ответа API, даже если у вас нет соответствующих данных.

Answer 2

Есть несколько проблем с вашим кодом.Во-первых, вы не должны назначать переменные класса внутри вашего конструктора.Это не то, для чего нужны конструкторы.Если вы назначите его следующим образом:

validation = false;

constructor() {}

Затем он будет назначен до угловых жизненных циклов.

Во-вторых, в вашем чеке:

if(this.employees.length === 0 || this.employees.length === null){

Это неверно,Длина не может быть нулевой;Это должно быть:

if (!this.employees || this.employees.length === 0) {

}

Вот рабочий пример того, чего вы пытаетесь достичь:

https://stackblitz.com/edit/angular-ypaaea?file=src%2Fapp%2Fapp.component.ts