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

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

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

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

自动编码同步

有人能帮我实现这个目标吗？

---

谢谢。

您可以通过

[attr.{{attribute}}]

在angular中添加任何文档属性

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

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

自动编码同步

---

您可以通过

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

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

自动编码同步

---

使用

[禁用]

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

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

自动编码同步

使用

[disabled]

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

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

自动编码同步

使用ngIf和您的条件（状态===已完成）来显示/隐藏按钮

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

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

将ngIf与您的条件（状态==已完成）一起使用以显示/隐藏按钮

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

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


您可以在
微调器
和
按钮
上使用
[hidden]
属性，但我不确定您为什么要使用
*ngFor=“let task of tasks res”
是否有多个按钮和微调器

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

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


自动编码同步

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

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

您可以添加一个单独的属性作为true和false，并根据您的情况进行读取-希望这能起作用-快乐编码
 您可以在
微调器
和
按钮
上使用
[hidden]
属性，但我不确定您为什么要使用
*ngFor=“let task of tasksRes”
是否有多个按钮和微调器

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

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


自动编码同步

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

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

您可以添加一个单独的属性作为true和false，并根据您的情况进行读取-希望这能起作用-快乐编码
 您可以有条件地禁用按钮
[disabled]=“task？”.status==“In_progress”
您可以有条件地禁用按钮
[disabled]=“task？”.status==“In_progress”
虽然这可能回答了作者的问题，但它缺少一些解释文字和/或文档链接。如果没有一些短语，原始代码片段就没有多大帮助。你也会发现这很有帮助。请编辑您的答案-虽然这可能回答了作者的问题，但它缺少一些解释性词语和/或文档链接。如果没有一些短语，原始代码片段就没有多大帮助。你也会发现这很有帮助。请编辑你的答案-
<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>