html - Angular 6 - 如何根据条件禁用 div
问题描述
我有一个 div 会在单击按钮时展开,当我再次单击该 div 时,它将是可单击的或会出现警报,但是当我单击展开的(100%)视图时它不应该是可单击的,它应该像禁用.再次当我回到以前的(25%)视图时,div应该是可点击的。任何人都可以帮助我。这是下面的代码
app.component.html
<button (click)="change()">change</button>
<div (click)="expand()" [ngClass]="{'old': toggle, 'new': !toggle}"class="old">
Hello
</div>
app.component.ts
declare var require: any;
import { Component,OnInit, Output, EventEmitter } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit{
toggle:boolean = true;
ngOnInit(){
}
change(){
this.toggle = !this.toggle;
}
expand(){
alert('hi');
}
}
样式.css
.old{
width:25%;
border:1px solid;
height:200px;
cursor:pointer;
background:yellow;
}
.new{
width:100%;
border:1px solid;
height:200px;
cursor:pointer;
background:green;
}
解决方案
尝试这个:
<button (click)="change()">change</button>
<div [class.disabled]="!toggle" (click)="toggle && expand()" [ngClass]="{'old': toggle, 'new': !toggle}"class="old">
Hello
</div>
在 CSS 中:
.disabled {
cursor: not-allowed;
}
推荐阅读
- python - Python3,Beautifulsoup 没有返回任何东西?
- css - 使用 css 过渡模仿 XD 的“捕捉”动画
- node.js - 如何修复特定 REST api 调用的“503 Service not found”?
- r - 是否有一种通用的方法可以将变量名传递给 R 中的函数?如果不是,为什么?
- python - UnicodeEncodeError:“charmap”编解码器无法编码字符“\u010d”
- c++ - FbxMesh 如何确定使用哪个 FbxSurfaceMaterial?(FBX SDK 2019)
- mysql - MySQL:针对所有列的 WHERE 条件而不指定它们
- azure - 将 Service Fabric 应用迁移到 Kubernetes
- vim - 使用 vim-latex-live-preview:如何使 pdf 视图显示您编辑文件的位置
- sml - 实现二分查找但找不到元素