Angular2搜索过滤器如何显示找不到记录

Question

<input Type="text" (keyup)="someval('$event.target.value')"/>    
<table>
    <tr>
    <th> Id</th>
    <th>Name</th></tr>
    <tr *ngFor="let emp of pagedItems">
    <td>{{emp.Id}}</td>
    <td>{{emp.Name}}</td>
    </tr>
     <tr *ngIf="ErrorHandle">
                            <td colspan="5">
                               {{ErrorMsg}}
                            </td>
                        </tr>

打字稿

在这里我写了一些代码来处理我的Search文本框的期望Id值并在表中找到rec。当Record是它们的显示Rec时，但是它不可用，我想2隐藏* ngFor

someval(value){
  if(value.length>=5){
   this._pagedItems= this.allItems.find(e=>e.uniqueid == value);
    if(this._pagedItems == undefined){
      this.ErrorHandle=true;
      this.ErrorMsg="No Such Record is Present......."
    }
    else{

      this.pagedItems=[];
      this.pagedItems.push(this._pagedItems);
    }

Answer 1

您可以执行以下代码。我在FIDDLE

中创建它

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  name = 'Angular 6';
  ErrorHandle :Boolean = false;
  ErrorMsg :string ="No Such Record is Present.......";
  allItems = [{ Id: 1, Name: "chintan" }]
  pagedItems = [];
  emp = { Id: 1, Name: "chintan" };

  someval(value) {
    if (value) {
      this.pagedItems = [];
      let emp = this.allItems.find(e => e.Id == value);
      if (emp == undefined) {
        this.ErrorHandle = true; 
      } else {
        this.ErrorHandle = false;
        this.pagedItems.push(emp);
      }
    }
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.17/angular2-all-testing.umd.dev.js"></script>
<hello name="{{ name }}"></hello>
<p>
	Start editing to see some magic happen :)
</p>


<input Type="text" (keyup)="someval($event.target.value)" />
<table>
	<tr *ngIf="!ErrorHandle">
		<th> Id</th>
		<th>Name</th>
	</tr>
	<tr *ngFor="let emp of pagedItems">
		<td>{{emp.Id}}</td>
		<td>{{emp.Name}}</td>
	</tr>
	<tr *ngIf="ErrorHandle">
		<td colspan="5">
			{{ErrorMsg}}
		</td>
	</tr>
</table>