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>

我故意将服务遗漏，因为它按预期工作，而不是本例所需。

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

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

如何使用现代方法实现这一目标？

Answer 1

您需要使用Pipe。 Here是一个例子，我在Github上创建了一个要点，因为它很长。

操作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 = [];
  objectsFilter = {name: ''};

  constructor(private operationService: OperationService) { }

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

操作catalogue.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/

Answer 2

您可以使用Angular2 +的indexOf功能，

<li *ngIf="searchElement === '' || (label |  lowercase).indexOf(searchElement |  lowercase) != -1" >

这将在没有任何额外管道的情况下工作。如果找到匹配文本，indexOf将返回任何数字。

过滤和搜索无序列表Angular2

2 个答案: