[英]AngularMaterial mat-slide-toggle toogle working only for the first component
[英]Make mat-slide-toggle read only
我在我的应用程序中使用 mat-slide-toggle 并想知道是否有办法使其只读,即禁用滑块。 我不想禁用整个组件,这是我设置 disabled 属性时的结果。 有没有办法做到这一点?
作为解决此问题的方法,您可以添加ngModel
和ngModelChange
输出以强制 mat-slide 保持相同的值(不是完美的解决方案,但它会起作用)
<mat-slide-toggle [(ngModel)]="myModel" (ngModelChange)="keepIt($event)">
</mat-slide-toggle>
在 Ts 文件上
keepIt(d){
this.myModel=true
}
您可以做的另一个解决方案是从 mat-disabled 中删除不透明度,这将使它看起来像一个活动滑块,然后您可以添加 [disabled]="true"
::ng-deep .mat-slide-toggle.mat-disabled {
opacity: 1 !important;
}
检查这个https://stackblitz.com/edit/angular-9zujdv?file=src%2Fapp%2Fslide-toggle-overview-example.html
您还可以创建指令
@Directive({
selector: '[disableToogle]'
})
export class DisableToogleDirective {
@Input() set disableToogle(value:boolean)
{
this.slide.toggleChange.closed=value
}
constructor(private slide:MatSlideToggle) { }
}
你用作
<mat-slide-toggle [disableToogle]="variable">Slide me!</mat-slide-toggle>
查看堆栈闪电战
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.