Javascript 我们如何筛选可观察的项目？

模型如下所示

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;
}

2-在

issucess===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>

<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>

上传


{{item.file？.name}
{{item.file？.size}
去除

如果该类别中只有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>

上传
上传


{{item.file？.name}
{{item.file？.size}
取消
去除

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

我试过的是

    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>

getInProgressItem（）：任意{
//tslint：禁用下一行：仅箭头功能
//tslint:禁用下一行：typedef
const a=this.queue.pipe（过滤器（（结果，id）：any=>{
返回result.filter（（x）=>x.inProgress（）==true）；
}));
返回a；
}
getSuccussItem（）：任何{
//tslint：禁用下一行：仅箭头功能
//tslint:禁用下一行：typedef
//tslint：禁用下一行：无未使用
const b=this.queue.pipe（过滤器（（结果，id）：any=>{
返回result.filter（（x）=>x.issucess（）==true）；
}));
返回b；
}
上传
上传

---

它对我不起作用

我认为合适的解决方案是将你的队列可观测分为两个可观测，如下所示：

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>

{{item.file？.name}
{{item.file？.size}}如果您订阅了任何内容，请只添加相关的标记。你使用主题等吗？你如何推动/改变状态“我尝试的是”，“它会工作吗”。。。好吧，如果你尝试过，你会告诉我们：它有效吗？@jcuypers-我在angular中使用异步管道，我想，它应该作为订阅来完成工作，而不仅仅是声明为queue:Observable@LazarLjubenović-不，这对我不起作用！实际上，您可以将整个html列表合并为一个组件/模板，并在
ngIf
的帮助下使用不同的按钮和跨距，我们可以将其用作主要的ng容器吗？并将所有内容放入{{item.file？.size}}in？-只是好奇为什么我们需要使用主ng容器？ng容器不会在结果html中呈现。我将
|async as
和
*ngIf=items.lnegth“
逻辑分开，因为angular不支持引用和条件，如
*ngIf=“（itemsStream | async as items）.length”
出于某种原因，我将在一个地方为该解决方案创建stackblitz请查看此解决方案，答案对我不起作用=>
<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>