Angular 8 根据父级禁用按钮 class

Question

您好，如果导航有 class 'done' 或 'active' 总是动态添加，您需要将按钮 [禁用]。

模板：

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

我不知道该怎么做，所以寻求帮助。

Answer 1

你可以试试这样的

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

Answer 2

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

Answer 3

您可以访问 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>

堆栈闪电战： https://stackblitz.com/edit/angular-ivy-qjsvfi?file=src/app/app.component.html

编辑：看起来你正在使用 bootstrap，你可能想考虑设置禁用 class 而不是属性。

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

Angular 8 根据父级禁用按钮 class

Angular 8 make button disable based on parent class

angular2-template

angular