Angular 8 make按钮基于父类禁用

问题描述

如果导航具有总是动态添加的类“ done”或“ active”，那么您需要使按钮[disable]。

模板：

<div
 class="nav"
 *ngFor="let step of steps; let stepIndex = index"
 [ngClass]="{
  done: step.done,active: stepIndex == selectedindex
  }"
 >
 <button class="btn"></button>
</div>

我不确定如何执行此操作，因此需要一些帮助。

解决方法

您可以尝试这样的事情

<button [disabled]="step.done || stepIndex == selectedIndex" class="btn"></button>

您可以在按钮的[disabled]属性中再次绑定条件。尝试以下

<div
  class="nav"
  *ngFor="let step of steps; let stepIndex = index"
  [ngClass]="{
    done: step.done,active: stepIndex == selectedIndex
  }">

  <button class="btn" [disabled]="step.done || stepIndex == selectedIndex"></button>
</div>

您可以访问DOM元素，例如：

<div #div1 class="foobar hero">
  I am a div with any class
  <button class="btn" [disabled]="div1.classList.contains('done') || div1.classList.contains('active')">Button</button>
</div>
<hr>
<div #div2>
  I am a div with no class
  <button class="btn" [disabled]="div2.classList.contains('done') || div2.classList.contains('active')">Button</button>
</div>
<hr>
<div #div3 class="done">
  I am a div with done class
  <button class="btn" [disabled]="div3.classList.contains('done') || div3.classList.contains('active')">Button</button>
</div>
<hr>
<div #div4 class="active">
  I am a div with active class
  <button class="btn" [disabled]="div4.classList.contains('done') || div4.classList.contains('active')">Button</button>
</div>
<hr>

Stackblitz： https://stackblitz.com/edit/angular-ivy-qjsvfi?file=src/app/app.component.html

编辑：似乎您正在使用引导程序，因此您可能需要考虑设置禁用的类而不是属性。

<button class="btn" [ngClass]="{ disabled: div4.classList.contains('done') || div4.classList.contains('active') }">Button</button>

angular angular2-template