微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

如何解决在解析异步管道之前,数组为空

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

用户输入输入时,过滤器管道被触发,过滤器结果延迟 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 举报,一经查实,本站将立刻删除。