如何解决在解析异步管道之前,数组为空
我正在开发一个异步过滤器管道,它根据用户提供的输入过滤数组。
当用户输入输入时,过滤器管道被触发,过滤器结果延迟 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 举报,一经查实,本站将立刻删除。