Question

我在[HttpPost] public String Post([FromBody]User user) { try { return db.InsertFineInfo(user); } catch (Exception ex) { return "ERROR Testing Purposes: " + ex; } }标记上使用自定义过滤器管道。用户只需在<li></li>中键入一个术语，该列表就像搜索功能一样被过滤。

test.component.html

<input>

test.component.ts

<form id="filter">
    <label>Filter people by name:</label>
    <input type="text" [(ngModel)]="term" />
</form>

<ul id="people-listing">
    <li *ngFor="let person of people | filter:term">
        <div class="single-person">

            <span [ngStyle]="{background: person.belt}">{{person.belt}} belt</span>

            <h3>{{person.name}}</h3>
        </div>
    </li>
</ul>

filter.pipe.ts

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { FilterPipe } from '../filter.pipe';

@Component({
  selector: 'app-directory',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.css']
})
export class TestComponent implements OnInit {


  people = [

     {name: "Yoshi", belt: "black"},
     {name: "Ryu", belt: "red"},
     {name: "Crystal", belt: "purple"}


  ];

  constructor() { 

  }

  ngOnInit() {
  }

}

每当我在import { Pipe, PipeTransform } from '@angular/core'; @Pipe({ name: 'filter' }) export class FilterPipe implements PipeTransform { transform(people: any, term: any): any { //check if search term is undefined if(term === undefined) return people; //return updates people array return people.filter(function(thisperson){ return thisperson.name.toLowerCase().includes(term.toLowerCase()); }) } }标签中输入名称时，不会根据输入的单词过滤带有* ngFor的列表。

我正在使用Angular 4.1.1。

您是否知道如何修复上述代码？感谢。

Answer 1

将您的输入与name属性绑定。

<form id="filter">
  <label>Filter people by name:</label>
  <input type="text" name="people" [(ngModel)]="term" />
</form>

另外，请务必将FilterPipe添加到declarations的{{1}}。

如何在Angular 4中使用* ngFor实现自定义过滤管道？

1 个答案: