Question

我正在使用Angular Material“ ^ 6.4.7”和Angular“ ^ 6.1.9”。我完成了一些路由，以浏览填充有可观察对象的菜单（以这些可观察对象的ID进行导航）。现在，我必须添加一个自动完成功能来过滤此菜单（以帮助用户找到特定的选项），但是要实现此目的有些麻烦。

我的html

    <mat-form-field>
        <mat-label>Find datasource...</mat-label>
        <input matInput name="datasource filter" [formControl]="searchForm" [ngModel]="dataSourceFilterInput">
    </mat-form-field>

    <div *ngFor="let datasource of dataSourceFiltered$ | async">
        <div [routerLink]="[datasource.id]">
            <h6>{{datasource.name}}</h6>
        </div>
    </div>

我的ts：

export class DataSourceSelectorComponent implements OnInit {

dataSourceFiltered$: Observable<IDataSourceDefinition[]>;
dataSource$: Observable<IDataSourceDefinition[]>;
dataSourceList: IDataSourceDefinition[] = [];
searchForm: FormControl = new FormControl();

constructor(private _datasourceService: DataSourceConfigurationService, private _route: ActivatedRoute) {
}

ngOnInit() {
    this.dataSourceFiltered$ = this._route.paramMap.pipe(
        switchMap(params => {
            this.selectedId = +params.get("id");
            this.dataSource$ = this._datasourceService.getAllDataSources();
            this.dataSource$.subscribe(ds => (this.dataSourceList = ds));
            return this.dataSource$;
        })
    );
}

}

其中IDataSourceDefinition是我的带有属性“名称”的界面。

我认为我必须在ngOnInit内添加过滤器（如使用窗体控件（在本例中为searchForm）和“ valueChanges.pipe（）”在Angular Material中建议的那样），但所有方法都应类似于“ map”或“ startWith”或“ filter”不能与Observables一起使用。

我不能只过滤Observable的订阅，我需要过滤器返回一个Observable，否则路由将中断。

有什么建议吗？

Answer 1

在Angular 6使用的RxJs 6中，您调用map或filter之类的运算符的方式已更改。让您开始。

您已经正确地使用了switchMap，只需要继续这样做即可。

在RxJs 5中，您将像这样直接调用运算符：

someObservable
  .map(item => doSomethingWith(item))
  .filter(item => isThisItemValid(item));

以此类推。

从RxJs 6开始，将它们全部管道传输。所以我上面的伪代码变成了：

someObservable
  .pipe(map(item => doSomethingWith(item)))
  .pipe(filter(item => isThisItemValid(item)));

完全相同的代码，只需将它们包装在pipe调用中即可。

另一个相关的更改是从中导入它们。所有运算符（也许只是最多？）都是从rxjs/operators导入的，因此要使用map，switchMap和filter，请将其包括在文件顶部：

import { map, switchMap, filter } from 'rxjs/operators';

我不知道您想在示例代码中做什么，但是您可以在所拥有的代码的末尾添加额外的pipe调用：

ngOnInit() {
    this.dataSourceFiltered$ = this._route.paramMap.pipe(
        switchMap(params => {
            this.selectedId = +params.get("id");
            this.dataSource$ = this._datasourceService.getAllDataSources();
            this.dataSource$.subscribe(ds => (this.dataSourceList = ds));
            return this.dataSource$;
        })
    )
    .pipe(filter(item => filterItHere(item)))
    .pipe(map(item => mapItHere(item)));
}

如何在Angular Material Autocomplete

1 个答案: