Question

我有这个代码，它从我的对象列表（Frivillig）生成项目组件

<app-frivillig-item
  *ngFor="let frivilligEl of frivillige"
  [frivillig]="frivilligEl">
</app-frivillig-item>

我现在想要添加一个搜索字段，该字段应该动态地将列表更改为用户键入的内容。该列表包含一个对象数组，每个对象都有几个字符串属性。我只想根据这些字符串属性中的一个过滤列表。如果搜索文本中的每个字符都存在于同一索引的属性中（不区分大小写），则属性是匹配项。

列表本身位于一个服务中，该服务被注入到列表组件中，该组件使用* ngFor实例化项目组件：

frivillige: Frivillig[]

到目前为止，这是我的输入字段。它目前是双向绑定到列表组件中的字符串属性：

<input type="text" class="form-control" id="id" placeholder="Søg efter 
frivillig..." [(ngModel)]="term">

我不确定如何解决这个问题。我尝试过使用管道，但是当列表不仅仅是一组字符串时，发现它实现起来很困惑。如果您需要更多信息，请与我们联系。

Answer 1

您可以通过维护单独的已过滤项目列表来过滤您的组件：

模板：

<app-frivillig-item
  *ngFor="let frivilligEl of filteredList"
  [frivillig]="frivilligEl">
</app-frivillig-item>

<input type="text" [(ngModel)]="term" (ngModelChange)="onChange()"/>

组件：

export class YourComponent {
  public term: string;

  // Initialize the filtered list to the complete list
  public filteredList = this.frivillige;

  public onChange() {
    // If nothing is in the search box, return to the complete list
    if (!this.term) {
      this.filteredList = this.frivillige;

      return;
    }

    // Filter the list for items that have the same characters at the same
    // indices as this.term (case-insensitive)
    this.filteredList = this.frivillige.filter(item => {
        return item.YOUR_PROPERTY.substring(0, this.term.length).toLowerCase() === this.term.toLowerCase();
    });
  }
}

根据字符串属性过滤项目组件列表，不区分大小写

1 个答案: