使用angular 6有条件地显示和隐藏按钮

Question

实际上，我正在尝试在任务运行时禁用该按钮。一旦任务加载完成，我想激活按钮。意味着同步图标在任务状态为“In_progress”时平行旋转，一旦状态更改为“Completed”，微调器应隐藏，而按钮“AutoCode sync”应被激活。那么如何实现这一点呢？为此，我编写了以下代码：

<section *ngFor="let task of tasksRes">
    <nav>
        <span class="text-warning" *ngIf="task?.status == 'In_progress'"><i class="fa fa-spinner fa-spin"></i></span> 
    </nav>

    <div class="pull-right">
        <button mat-raised-button color="primary" (click)="open();" class="btn-w-md">
        AutoCode Sync
        </button>
    </div>
</section>

有没有人能帮我实现这一点？谢谢。

Answer 1

对您的条件(status === Completed)使用ngIf以显示/隐藏该按钮

<div class="pull-right">
    <button mat-raised-button color="primary" (click)="open();" class="btn-w-md" *ngIf="task?.status == 'Completed'"">
    AutoCode Sync
    </button>
</div>

Answer 2

您可以在spinner和button上使用[hidden]属性，但我不确定您为什么要使用*ngFor="let task of tasksRes"您是否获得多个按钮和微调器

<section *ngFor="let task of tasksRes">
    <nav [hidden]="task?.status == 'Completed'" >
        <span class="text-warning" *ngIf="task?.status == 'In_progress'"><i class="fa fa-spinner fa-spin"></i></span> 
    </nav>

    <div class="pull-right" [hidden]="task?.status == 'In_progress'">
        <button mat-raised-button color="primary" (click)="open();" class="btn-w-md">
        AutoCode Sync
        </button>
    </div>
</section>

这将根据条件进行切换，显示和隐藏按钮

您可以添加一个单独的属性作为true和false，并根据您的条件读取它-希望这能起作用-编码快乐!！

Answer 3

您可以在angular中通过[attr.{{attribute}}]添加任何文档属性。

<div class="pull-right">
    <button mat-raised-button [attr.disabled]="task?.status == your_situation" color="primary" (click)="open();" class="btn-w-md">
    AutoCode Sync
    </button>
</div>

​