javascript - 我们如何过滤可观察的项目？

Question

模型如下所示

export class FileQueueObject {
    public file: any; // used any because selected file contain.
    public status: FileQueueStatus = FileQueueStatus.Pending;
    public progress = 0;
    public request: Subscription = null;
    public response: HttpResponse<object> | HttpErrorResponse = null;

    constructor(file: any) {
        this.file = file;
    }

    // statuses
    public isPending = () => this.status === FileQueueStatus.Pending;
    public isSuccess = () => this.status === FileQueueStatus.Success;
    public isError = () => this.status === FileQueueStatus.Error;
    public inProgress = () => this.status === FileQueueStatus.Progress;
    public isUploadable = () => this.status === FileQueueStatus.Pending || this.status === FileQueueStatus.Error;
}

TS

queue: Observable<FileQueueObject[]>;

html 如下所示

3个问题:

我想要实现的是，

1 - inProgress === true 放在不同部分的项目。

<span>Uploading <span>
        <ul>
        <li *ngFor="let item of queue | async"> 
            <div>{{ item.file?.name }}</div>
            <div>{{ item.file?.size }}</div>
            <a *ngIf="item.inProgress()">Cancel</a>
        </li>
        <ul>

isSuccess===true 中的 2 项放在不同的部分。

<span>Uploaded <span>
        <ul>
        <li *ngFor="let item of queue | async"> 
            <div>{{ item.file?.name }}</div>
            <div>{{ item.file?.size }}</div>
            <a *ngIf="!item.inProgress()">Remove</a>
        </li>
        <ul>

如果该类别中只有 1 个项目，则标题应该可见。

3 - 是否可以只写 1 个 html，如下所示？

<span *ngIf="">Uploading <span>  
<span *ngIf="">Uploaded <span>
            <ul>
            <li *ngFor="let item of queue | async"> 
                <div>{{ item.file?.name }}</div>
                <div>{{ item.file?.size }}</div>
                <a *ngIf="item.inProgress()">Cancel</a>
                <a *ngIf="!item.inProgress()">Remove</a>
            </li>
            <ul>

你有什么建议，如果我想将项目显示为上传和上传，上传将有取消按钮，上传将有删除按钮

我试过的是

    getInProgressItem(): any {
    // tslint:disable-next-line:only-arrow-functions
    // tslint:disable-next-line:typedef
    const a = this.queue.pipe(filter((result, id): any => {
      return result.filter((x) => x.inProgress() === true);
    }));
    return a;
  }

  getSuccussItem(): any {
    // tslint:disable-next-line:only-arrow-functions
    // tslint:disable-next-line:typedef
    // tslint:disable-next-line:no-unused
    const b = this.queue.pipe(filter((result, id): any => {
      return result.filter((x) => x.isSuccess() === true);
    }));
    return b;
  }
<span *ngIf="(getInProgressItem().length > 0 | async)"
          class="c-fileupload__indicator">Uploading</span>
    <span *ngIf="(getSuccussItem().length > 0 | async)"
          class="c-fileupload__indicator">Uploaded</span>

它对我不起作用

Answer 1

我认为合适的解决方案是将您的队列可观察对象拆分为 2 个可观察对象，如下所示:

queueSuccessfulItems = this.queue.pipe(map(items => items.filter(item => item.isSuccess())))
queueInProgressItems = this.queue.pipe(map(items => items.filter(item => item.inProgress())))

然后像这样使用它

<ng-template #itemTemplate let-item="item">
   <div>{{ item.file?.name }}</div>
   <div>{{ item.file?.size }}</div
</ng-template>

<ng-container *ngIf="queueInProgressItems | async as inProgressItems">
  <div *ngIf="inProgressItems.length"> <!-- here we have an array, not a stream -->
   <span>Uploading <span>
    <ul>
     <li *ngFor="let item of inProgressItems"> 
       <ng-container 
        *ngTemplateOutlet="itemTemplate;context:{item: item}">
       </ng-container>
       <a>Cancel</a>
    </li>
   </ul>
 </div>

<ng-container *ngIf="queueSuccessfulItems | async as successfulItems">
  <div *ngIf="successfulItems.length">
   <span>Uploaded <span>
    <ul>
     <li *ngFor="let item of successfulItems"> 
       <ng-container 
        *ngTemplateOutlet="itemTemplate;context:{item: item}">
       </ng-container>
       <a>Remove</a>
    </li>
   </ul>
 </div>