使用管道和地图创建过滤器答案

【问题标题】：Angular creating filter with pipe and map使用管道和地图创建过滤器
【发布时间】：2021-10-12 02:18:05
【问题描述】：

我对 Angular 还很陌生，我正在尝试为一个值创建一个过滤器。

在我的组件中 - 我有 => myData$: Observable<MyInterface>

界面如下

export class FoundValues {
    customerName: string;
    startDate: string;
    endDate: string;
    includes(values: string) : boolean {
      value = value.toLowerCase();
      return this.valueIncludes(this.customerName, value);
    }

    private valueIncludes(includedValue, value){
       if (value) {
         const value = value.toLowerCase().includes(includedValue);
         return result;
       } else {
          return false;
       }
    }
}
export interface MyInterface {
    found_values : Array<FoundValues>;
}

在我的组件 ngOnInit() 中，我试图创建一个逻辑过滤器，但没有得到它，因为它返回类型 FoundValues[] 并且它抱怨它不是预期的 Observable 返回类型。

export class MyComponent implements OnInit{
      myData$ = Observable<MyInterface>;
      myControl = new FormControl();

     ngOnInit(): void{
        this.filterData = 
        this.myControl.valueChanges.pipe(map(value=>this._filter(value)));
     }
     private _filter(value:string): .....{
         --- need logic here ----
     }
}

如何创建过滤器，以便在我在表单中输入客户名称时只显示匹配的客户名称？

【问题讨论】：

标签： javascript angular typescript rxjs

【解决方案1】：

可以使用combineLatestRxJS操作符进行过滤，如下代码sn -p所示，

export class MyComponent implements OnInit {
  myData$ = Observable < MyInterface > ;
  mySearchQuery$: Observable < any > ;
  searchString = new FormControl('');

  filterData: Observable < any >

    constructor() {
      mySearchQuery$ = this.searchString.valueChanges.startsWith('');
    }

  ngOnInit(): void {
    this.filterData = this.searchQuery$.combineLatest(this.myData$).map(([queryString, listOfCustomers]) => {
      return listOfCustomers.filter(customer => customer.name.toLowerCase().indexOf(queryString.toLowerCase()) !== -1)
    })
  }
}

combineLatest RxJS 运算符接收可观察对象 myData$ 和 mySearchQuery 并返回可观察对象 filterData，其中包含与 searchString 匹配的发射值。

【讨论】：

看起来 combineLatest 已贬值。我正在使用 ng 版本 11.2

【解决方案2】：

通常的角度设计会有所不同

https://stackblitz.com/edit/angular7-rxjs-pgvqo5?file=src/app/app.component.ts

interface Entity {
  name: string;
  //...other properties
}

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  name = new FormControl('');
  data$: Observable<Array<Entity>> = of([
    { name: 'Jhon' },
    { name: 'Jane' },
    { name: 'Apple' },
    { name: 'Cherry' },
  ]);

  filtered$: Observable<Array<Entity>>;

  ngOnInit() {
    // this can be moved to a util lib/file
    const startWithPipe = pipe(
      map(
        ([query, data]: [query: string, data: Array<Entity>]): Array<Entity> =>
          data.filter((entity) =>
            query ? entity.name.toLowerCase().startsWith(query) : true
          )
      )
    );

    this.filtered$ = this.name.valueChanges.pipe(
      startWith(''),
      debounceTime<string>(300),
      withLatestFrom(this.data$),
      startWithPipe
    );
  }

【讨论】：