如何使用搜索操作在 Angular 中显示错误消息答案

【问题标题】：How to display the error message in Angular with search operation如何使用搜索操作在 Angular 中显示错误消息
【发布时间】：2018-10-01 05:54:16
【问题描述】：

如何显示错误信息。

如果搜索结果在 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);
}

【问题讨论】：

标签： angular spring-boot

【解决方案1】：

对此*ngIf="users.length; else noRecord"使用else条件

<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>

【讨论】：

【解决方案2】：

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

【讨论】：