如何使用 ngModel 和 ngIf 过滤数据

Question

我是 ionic2 的新手，我需要根据输入的内容过滤数据，所以我想到了使用 ngModel 和 ngIf。我的 JSON 包含姓名和电子邮件列表，代码如下。请告诉我哪里出错了，或者如果有任何其他方式请告诉我。

在打字稿中，我已将 namefilter 初始化为特定名称

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import {Http , Headers} from '@angular/http';
import 'rxjs/add/operator/map'

@Component({
  selector: 'page-home',
  templateUrl: 'home.html',
})

export class HomePage {
  url:string;
  data:any[];
  namefilter:string='raj';

  constructor(public navCtrl: NavController , public http : Http) {
     this.getdata();
  }

  getdata() {
     this.url="http://example.com/json";
     this.http.get(this.url).map(res => res.json()).subscribe( res =>{
        console.log(res);
        this.data = res;
     }, err => {
        console.log(err);
     });
  }
}

这是HTML:

<ion-list>
    <ion-item>
      <ion-label>Username</ion-label>
      <ion-input type="text" [(ngModel)] = 'namefilter' ></ion-input>
    </ion-item>
    <p> filtered by name : {{namefilter}} </p>
</ion-list>
  <div  *ngFor = ' let content of data ' >
    <ion-card  (click)="infoPage(content)" *ngIf="content.name === '{{namefilter}}' " >
      <h4>{{content.name}} : {{content.email}} </h4>
    </ion-card>
  </div>

Answer 1

正如@raj 已经评论的那样，您的 *ngIf 是错误的！

它应该是这样的：

<ion-card (click)="infoPage(content)" *ngIf="content.name === namefilter">

在 *ngIf 中，您必须使用没有插值的变量。

Answer 2

只需更新您的 IF 条件。而且我认为也没有必要检查类型和值。

=== : 将检查值和类型

== ：将只检查值

<ion-card  (click)="infoPage(content)" *ngIf="content.name == namefilter" >

如何使用 ngModel 和 ngIf 过滤数据

how to use ngModel and ngIf for filtering data

ionic2

angular2-ngmodel

angular