Как отобразить сообщение об ошибке в Angular с операцией поиска

Question

Как отобразить сообщение об ошибке.

, если результат поиска не имеет соответствующего значения в Angular.

Пример: если результат поиска не найден, я хочу отобразить какое-то сообщение, например результат не найден.

listuser.component.html

<input #searchBox ng-model="searchText" id="searchBox" placeholder="search by id" (keyup)="searchUser(searchBox.value) ">&nbsp;
<table class="table table-striped">
    <thead>
        <th>Id</th>
        <th>User Name</th>
    </thead>
    <tbody>

        <tr *ngFor="let user of users">
            <td>{{user.id}}</td>
            <td>{{user.username}}</td>
        </tr>
    </tbody>
</table>

listuser.component.ts

searchUser(id){
    var temp = [];
    this.users = [];
    this._userService.getUser(id).subscribe((temp) => {
        console.log(temp)
        this.users.push(temp);
        console.log(this.users)
    }, (error) => {
        console.log(error);
    })
}

это мой user.service.ts

getUser(id: Number){
    return this._http.get(this.baseUrl + '/car/' + id, this.options)
        .map((response: Response) => response.json())
        .catch(this.errorHandler);
}

Answer 1

В файле listuser.component.html вы можете определить модальный вариант начальной загрузки, как показано ниже

<div class="modal fade" *ngIf="errmessage" role="dialog">
    <div class="modal-dialog modal-sm">
      <div class="modal-content">

        <div class="modal-body">
          <p>{{errmessage}}</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal" (click)="cancelErrorMessage()">Close</button>
        </div>
      </div>
    </div>
  </div>

listuser.component.ts

searchUser(id){
      var temp = [];
      this.users = [];
      this._userService.getUser(id).subscribe((temp)=>{
        if(this.temp.length > 0 ){
          this.users.push(temp);
           }else if(this.temp.length < 0){
          errmessage = "No result Found"

         }
      },(error)=>{
        console.log(error);
      })
     }

cancelErrorMessage(){
  this.errormessage =null;
 }

Answer 2

используйте другое условие для этого *ngIf="users.length; else noRecord"

<table class="table table-striped" *ngIf="users.length; else noRecord">
    <thead>
        <th>Id</th>
        <th>User Name</th>
    </thead>
    <tbody>

        <tr *ngFor="let user of users">
            <td>{{user.id}}</td>
            <td>{{user.username}}</td>
        </tr>
    </tbody>
</table>

<ng-template #noRecord>Result not found!!!</ng-template>