首页 > 解决方案 > Displaying Message when no search result found in Angular

问题描述

The this.searchError shows even if docCheck.id not equals null.

I have tried setting whether the result.length of the search equals zero to display the error message.

However, I get from the console data.map error

    filterDocument(customerId: number, from: string, to: string, criterion: string) {
    this.filteredDocument = [];      
    this.searchError = '';
    this.documentService.getDocuments(customerId, privateDoc, from, to, 
       criterion).subscribe(
      data => {       
        if(this.docCheck.id == null){
            this.searchError ='No search related document found';
          console.log('No related search found')
        }
        this.showspinner = false;
        data.map(item => {
          this.filteredDocument.push(item);
          console.log('this is the data from filter:', data);
        });
        this.showspinner = false;
               },
      error1 => {
        this.swalWithBootstrapButtons.fire(
          'Error!',
          'Error inesperado al mostrar el filtro.',
          'error'
        );
      });
    // this.documents = this.filteredDocument;
   }
 }

HTML- Table Display

<div *ngIf="!showspinner && searchError" class="card">
    <div class="card-header notification py-3">
       <span class="font-weight-bold text-dark">{{searchError}}</span>
    </div>
 </div>

<table *ngIf="!showspinner && filteredDocument.length>0">
            <thead>
            <tr class="bg-primary text-white" >
              <th class="text-left" scope="col">Date Registration</th>
              <th class="text-left" scope="col">Title of Document</th>

            </tr>
            </thead>

            <tbody *ngFor="let doc of filteredDocument">
            <tr>
              <td class="text-left">{{doc.date | date: 'dd-MM-yyyy'}}</td>
              <td class="text-left" [title]="doc.name ? doc.name : ''">{{doc.name}}
                <!--<b>{{(doc.name) ? (doc.name | slice:0:45) + '...' : (doc.date)}}</b>-->
                <span *ngIf="!doc.name">-----</span>
              </td>

            </tr>
            </tbody>
          </table>

标签: javascripthtmlangulartypescript

解决方案


推荐阅读