как использовать ngModel и ngIf для фильтрации данных

Я новичок в ionic2, мне нужно фильтровать данные на основе того, что я ввожу, поэтому я подумал об использовании ngModel и ngIf. Мой JSON содержит список имен и адресов электронной почты, а код приведен ниже. Пожалуйста, скажите мне, где я ошибаюсь, или, если есть другие способы, дайте мне знать.

В машинописном тексте я инициализировал фильтр имен для определенного имени

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>

person inoxe    schedule 22.12.2016    source источник
comment
Вы import { FormsModule } from '@angular/forms'; в своем файле module.ts ? Также не могли бы вы опубликовать код компонента машинописного текста?   -  person Piou    schedule 22.12.2016
comment
нет, я не импортирую.   -  person inoxe    schedule 22.12.2016
comment
это просто дополнительное сомнение, могу ли я проверить 2 условия, не похожие на любой другой метод: *ngIf= content.name == namefilter || content.name == namefilter2 . что-то вроде этого: *ngIf= content.name == namefilter || имяфильтр2   -  person inoxe    schedule 22.12.2016


Ответы (2)


Как уже прокомментировал @raj, ваш *ngIf неверен!

Это должно выглядеть так:

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

В *ngIf вы должны использовать свои переменные без интерполяции.

person slaesh    schedule 22.12.2016
comment
это просто дополнительное сомнение, могу ли я проверить 2 условия, не похожие на любой другой метод: *ngIf= content.name == namefilter || content.name == namefilter2 . что-то вроде этого: *ngIf= content.name == namefilter || имяфильтр2 - person inoxe; 22.12.2016
comment
Нет, сработает только первый способ. Вы можете создать функцию внутри вашего компонента filterName(name: string): bool, которая проверит все условия и вернет логическое значение... а затем сделает это: *ngIf="filterName(content.name)" - person slaesh; 22.12.2016

Просто обновите свое условие IF. И я думаю, что нет необходимости проверять тип и значение.

=== : проверит значение и тип

== : будет проверяться только значение

<ion-card  (click)="infoPage(content)" *ngIf="content.name == namefilter" >
person Sandip - Frontend Developer    schedule 22.12.2016
comment
это просто дополнительное сомнение, могу ли я проверить 2 условия, не похожие на любой другой метод: *ngIf= content.name == namefilter || content.name == namefilter2 . что-то вроде этого: *ngIf= content.name == namefilter || имяфильтр2 - person inoxe; 22.12.2016
comment
да, вы можете: *ngIf= content.name == namefilter || content.name == namefilter2 - person Sandip - Frontend Developer; 22.12.2016