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>

2-{{1}}中的项目放在不同的部分。

isSuccess===true

如果该类别中只有1个项目，则

标头应该可见。

3-是否可以通过仅编写1个html来实现此功能，如下所示？

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

您有什么建议，如果我想显示项目为“正在上传”和“正在上传”，则上传将具有“取消”按钮，而上传将具有“删除”按钮

我尝试过的是

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

它对我不起作用

Answer 1

我认为适当的解决方案是将您的可观察队列分为以下两个可观察对象：

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>

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

1 个答案: