在解析异步管道之前，数组为空

编程问答 2022-05-21

问题描述

我正在开发一个异步过滤器管道，它根据用户提供的输入过滤数组。

当用户输入输入时，过滤器管道被触发，过滤器结果延迟 1 秒返回。这是通过使用 Promise 实现的。

异步管道负责等待承诺，直到它（承诺）解析结果。

我的问题是，在延迟期间（当数据正在解析过程中），HTML呈现的结果是空的，直到数据被promise解析。我不希望 HTML 显示空结果，而是希望在解决承诺之前以 HTML 显示先前的数组列表。然后它应该显示新的过滤结果。

以角度过滤pip函数。订阅 observable 后，Promise 就解决了。 1000 毫秒后

@Pipe({
    name: 'filter'
})
export class FilterPipe implements PipeTransform {

    resolver: Function = null;

    transform(arr: any[],search: string) {
        
        let promise = new Promise<any[]>((res,rej) => {
            this.resolver = res;
        });

        from(arr).pipe(concatMap(item => of(item).pipe(delay(1000)))
        ).subscribe(timedItem => {
            this.resolver(arr.filter(x => x.toLowerCase().indexOf(search.toLocaleLowerCase()) !== -1));
        });

        return promise;
    }
}

在 HTML 模板中，异步与过滤器管道一起使用，而 myFilter 是用于过滤数组的输入参数。

<select-dropdown [(ngModel)]="selectValue">
        <input type="text" [(ngModel)]="myFilter">
        <select-option *ngFor="let item of list | filter : myFilter | async; let i = index" [value]="i">{{ item + ' ' + i }}</select-option>
</select-dropdown>

需要这方面的帮助。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

angularangularasynchronousobservableobservablepipepromise