Javascript 筛选和搜索无序列表2

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

我有一个组件，它使用

*ngFor

指令在页面加载上构建一个无序列表，其中包含从JSON文件获取的数据，它使用服务获取实际数据。以下是相关组件的代码：

操作目录.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();
  }
}

操作目录.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>

{{operation.name}

我故意忽略了该服务，因为它按照预期工作，在本例中不需要

我想做的是能够过滤使用html

input

元素生成的列表

我试着看看过去关于堆栈溢出的问题，但它们似乎都过时了，并且使用的方法Angular2不再支持

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

为此，您需要使用。这是一个例子，我在Github上创建了一个要点，因为它相当长

操作-catalog.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();
  }
}

operation-catalog.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>

{{operation.name}

例如：

---

您可以使用Angular2+的索引功能

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

---

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

是否需要

filterDefault

函数？此时此刻，我只对通过字符串（在本例中是名称，

{{operation.name}}

）进行过滤感兴趣@PythonNewb您可以简化我提供给您的管道，它是一个全方位的过滤管道，可以用于更高级的用例，也可以用于过滤多个对象键。我明白了。因此，对于我的基本用例，我只需要使用

filterbysting（）

方法。我想这行中有一个错误的引号

我现在已经修复了，但是
[（ngModel）]=“objectsFilter.name”
给了我一个错误“无法读取未定义的属性名”