Angular 8根据父类禁用按钮答案

【问题标题】：Angular 8 make button disable based on parent classAngular 8根据父类禁用按钮
【发布时间】：2020-08-24 07:39:02
【问题描述】：

如果导航具有始终动态添加的“完成”或“活动”类，您需要使按钮 [禁用]。

模板：

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

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

【问题讨论】：

标签： angular angular2-template

【解决方案1】：

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

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

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

【讨论】：

【解决方案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>

【讨论】：

【解决方案3】：

你可以试试这样的

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

【讨论】：

谢谢@kirubel，但我只需要根据父类添加禁用。
我已经更新了我的答案。因此，如果step.done 您将课程设置为done，如果stepIndex == selectedIndex 您的课程为active。在这种情况下，您也可以使用按钮的[disabled] 属性。