Question

实际上，我正在尝试在任务运行时禁用该按钮。任务加载完成后，我想激活按钮。意思是，当任务状态为“已完成”时，同步图标会旋转，一旦状态变为“已完成”，则应隐藏微调器，并应激活“自动代码同步”按钮。那么如何实现这一目标。为此，我编写了以下代码：

<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

根据情况（状态===已完成）使用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

您可以按[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>

Answer 3

有条件地使用button禁用[disabled]

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

Answer 4

您可以在[hidden]和spinner上同时使用button属性，但是我不确定为什么使用*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并根据您的情况读取它-希望它能起作用-编码愉快！！

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

4 个答案: