过滤和搜索无序列表 Angular2

Question

我正在寻找一种使用带角度的输入字段过滤无序列表的方法。

我有一个组件*ngFor，它使用指令在页面加载时使用从 JSON 文件中获取的数据构建一个无序列表，它通过使用服务来获取实际数据来实现。这是相关组件的代码：

operation-catalogue.component.ts：

import { Component, OnInit, Input } from '@angular/core';
import { OperationService } from "./operation.service";

@Component({
  selector: 'operation-catalogue-component',
  templateUrl: './operation-catalogue.component.html',
  styleUrls: ['./operation-catalogue.component.css'],
})
export class OperationCatalogueComponent implements OnInit {

  operationCatalogue = [];

  constructor(private operationService: OperationService) { }

  ngOnInit() {
      //Get the items to put in the list...
      this.operationCatalogue = this.operationService.getOperations();
  }
}

operation-catalogue.component.html：

<div id="search-box-div">
    <div id="search-field" class="top-div">
        <input #input type="text" placeholder="Filter">
    </div>
</div>
<ul>
    <!-- generate list, name only -->
    <li *ngFor="let operation of operationCatalogue">
        <label>{{operation.name}}</label>
    </li>
</ul>

我故意省略了该服务，因为它可以按预期工作并且本示例不需要。

我想要做的是能够过滤使用 htmlinput元素生成的列表。

我试图在这里查看过去关于堆栈溢出的问题，但它们似乎都已经过时并且使用了 Angular2 不再支持的方法。

我怎样才能用现代方法实现这个目标？

Answer 1

为此，您将需要使用管道。这是我在 Github 上创建了一个要点的示例，因为它很长。

操作目录.component.ts：

import { Component, OnInit, Input } from '@angular/core';
import { OperationService } from "./operation.service";

@Component({
  selector: 'operation-catalogue-component',
  templateUrl: './operation-catalogue.component.html',
  styleUrls: ['./operation-catalogue.component.css'],
})
export class OperationCatalogueComponent implements OnInit {

  operationCatalogue = [];
  objectsFilter = {name: ''};

  constructor(private operationService: OperationService) { }

  ngOnInit() {
      //Get the items to put in the list...
      this.operationCatalogue = this.operationService.getOperations();
  }
}

操作目录.component.html：

<div id="search-box-div">
    <div id="search-field" class="top-div">
        <input #input type="text" placeholder="Filter" [(ngModel)]="objectsFilter.name">
    </div>
</div>
<ul>
    <!-- generate list, name only -->
    <li *ngFor="let operation of operationCatalogue | filterBy: {name: objectsFilter.name};">
        <label>{{operation.name}}</label>
    </li>
</ul>

Plunker 示例：https ://embed.plnkr.co/xbW6nbkQZfwudOAnrEXl/