Angular 6中的搜索过滤器

Question

我有两个组件，一个叫做list，另一个叫做details。在列表组件中点击特定的list-item后，它会像下面的图片一样将所选/点击的list-item传递给details组件。

现在我已经将另一个名为search的组件放置在list组件上方，像这样：

我该如何为列表组件中的列表项应用过滤器，以便能够轻松搜索列表项？请保留HTML标签。 Stackblitz链接

- Empty_Soul

---

将从app-search搜索到的字符串输出，保存在list-component中，并对每个mat-list-option进行像*ngIf="contact.includes(searchQuery)"这样的操作。 或者为类似于此处*ngFor构建一个过滤器管道：https://dev59.com/YlcP5IYBdhLWcg3wLnRC - Roberto Zvjerković

Answer 1

您可以为此创建一个管道。

这里有一个可工作的解决方案

我创建了一个名为ListFilterPipe的管道。

@Pipe({
  name: 'listFilter'
})
export class ListFilterPipe implements PipeTransform {

  transform(list: any[], filterText: string): any {
    return list ? list.filter(item => item.name.search(new RegExp(filterText, 'i')) > -1) : [];
  }

}

只需按如下方式在*ngFor中使用它

<h4>List</h4>
<div class="main-div">
<app-search [(searchModel)]="searchModel"></app-search>
  <div class="list">
    <mat-selection-list  #contact>
      <mat-list-option  *ngFor="let contact of contacts | listFilter: searchModel">
        <a mat-list-item (click)="onSelect(contact)"><span>{{ contact?.name }}</span></a>
      </mat-list-option>
    </mat-selection-list>
  </div>

此外，我们还添加了输入和输出到 search.component ，以便我们可以更新我们的搜索模型。

search.component.ts

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

  @Input() searchModel;

  @Output() searchModelChange: EventEmitter<any> = new EventEmitter();

  constructor() { }

  ngOnInit() {
  }

  updateSearchModel(value) {
    this.searchModel = value;
    this.searchModelChange.emit(this.searchModel);
  }

}

search.component.html

<mat-form-field floatLabel="never">
  <input matInput class="searching-customer" type="text"  placeholder="Search" 
         [ngModel]="searchModel" 
         (ngModelChange)="updateSearchModel($event)">
</mat-form-field>

- Bunyamin Coskuner

Answer 2

您可以把联系人列表传递给搜索组件。 为此，请在List.component.html中进行更改。

<h4>List</h4>
<div class="main-div">
<app-search [list]="contacts" ></app-search>
  <div class="list">
    <mat-selection-list  #contact>
        <mat-list-option  *ngFor="let contact of contacts">
            <a mat-list-item (click)="onSelect(contact)"><span>{{ contact?.name }}</span></a>
        </mat-list-option>
      </mat-selection-list>
  </div>
</div>  

在你的搜索组件内： - 获取输入框的值 - 通过该输入值过滤列表

Search.component.html

<mat-form-field floatLabel=never >
  <input matInput class="searching-customer" type="text"  placeholder="Search" (input)="search($event.target.value)"  >
</mat-form-field>

search.component.ts

import { Component, OnInit , Input} from '@angular/core';
import { IContact } from '../models';

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

@Input()
public list:  IContact[] ;
searchedList : any;

  constructor() { }

  ngOnInit() {
  }

  // This function will be called on every key press for input text box
  search(value)
  {
    this.searchedList = this.list.filter(
      (val)=> val['name'].includes(value))
    //Searched Data
    console.log(this.searchedList)
  }
}

- Vishal Hasnani