如何解决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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。