我的应用中有一个基本的幻灯片切换按钮。
我想根据是否更改切换来更改幻灯片切换的文本。切换按钮时,基本上显示不同的文本。
我尝试使用Slide-toggle的toggleChange()方法,但重新加载时无法显示该文本。
同样,由于该函数是在切换切换时调用的,因此即使在切换事件触发时切换进入关闭状态,它也会显示文本。
我想在切换按钮时更改文本,但是仅在单击“保存设置”按钮时才保存切换的文本。我想我必须使用会话或本地存储来存储短信
我似乎不知道现在该怎么办。
请帮助。
预先感谢。
这是我的交易代码
export class PolicyComponent implements OnInit {
formGroup: FormGroup;
policy3: boolean=false;
policy4: boolean=false;
message:string="Message1";
test:boolean=false;
disable:boolean=true;
serverData:any
constructor(
private formBuilder: FormBuilder,private policyService:PolicyService
) { }
ngOnInit() {
this.formGroup = this.formBuilder.group({
Policy1: new FormControl(false, []),
Policy2: new FormControl(false, [])
});
this.policyService.getPolicy().subscribe((response) => {
this.serverData = response[0];
if(this.serverData.policy1=="F")
{
this.policy3=false;
}
else this.policy3=true;
if(this.serverData.policy2=="F")
{
this.policy4=false;
}
else this.policy4=true;
this.formGroup.controls.Policy1.setValue(this.policy3);
this.formGroup.controls.Policy2.setValue(this.policy4);
});
// if(this.formGroup.controls.Policy1.value)
// {
// this.message="Message1";
// }
// else if(!this.formGroup.controls.Policy1.value){
// this.message="Message2";
// }
// this.policyService.getUserById(+ localStorage.getItem("policyId")).subscribe();
}
onFormSubmit() {
console.log("Policy1::"+this.formGroup.controls.Policy1.value);
if(this.formGroup.controls.Policy1.value)
{
this.serverData.policy1="T";
}
else{
this.serverData.policy1="F";
}
console.log("Policy2::"+this.formGroup.controls.Policy2.value);
if(this.formGroup.controls.Policy2.value)
{
this.serverData.policy2="T";
}
else{
this.serverData.policy2="F";
}
//this.policyService.updatePolicy(this.policy.id,{policy1:this.policy.policy1}).subscribe(err=>{console.log(err)});
this.policyService.updateUser(this.serverData).subscribe(err=>{console.log(err)});
// alert(JSON.stringify(formValue, null, 2));
this.disable=true;
}
onChange(ob: MatSlideToggleChange) {
// this.policy3 = !this.policy3;
this.disable=false;
}
onChange1(ob: MatSlideToggleChange) {
// this.policy4 = !this.policy4;
this.message="Slide";
this.disable=false;
}
displayMessage()
{ console.log("Value is:"+this.formGroup.controls.Policy1.value);
if(!this.formGroup.controls.Policy1.value)
{
this.message="Message1";
}
else if(this.formGroup.controls.Policy1.value){
this.message="Message2";
}
}
}
这是我的模板代码:
<form class="example-form" [formGroup]="formGroup" (ngSubmit)="onFormSubmit()" ngNativeValidate>
<mat-action-list>
<mat-list-item > <mat-slide-toggle
(change)="onChange($event)" (toggleChange)="displayMessage()" formControlName="Policy1" >{{message}}</mat-slide-toggle></mat-list-item>
<mat-list-item > <mat-slide-toggle (change)="onChange($event)" formControlName="Policy2">Policy2</mat-slide-toggle></mat-list-item>
</mat-action-list>
<p>Form Group Status: {{ formGroup.status}}</p>
<button mat-rasied-button [disabled]="disable" type="submit">Save Settings</button>
</form>
答案 0 :(得分:0)
请注意以下有关toggleChange
的内容,这就是它们也有dragChange
事件的原因。
当用户拖动以更改幻灯片切换时,事件不会触发 值。
我个人的喜好是在这种情况下使用(change)
,并评估事件以查看e.checked
是true
还是false
...这种方法,切换是否为拖动事件都无关紧要,您的方法将在进行任何更改时被调用,并且仅在切换处于checked
状态时才设置消息。
<mat-slide-toggle
(change)="onChange($event);displayMessage($event)"
formControlName="Policy1" >{{message}}</mat-slide-toggle>
</mat-list-item>
displayMessage(e){
if(e.checked)
this.message = 'toggled'
else
this.message = 'Slide me!'
}
Stackblitz
https://stackblitz.com/edit/angular-g9w2p8?embed=1&file=app/slide-toggle-overview-example.ts
答案 1 :(得分:0)
这很简单。关键是在控件本身上设置一个id,以便您可以引用其状态。
<mat-slide-toggle class="ml-3" formControlName="paid" #paid >
<small *ngIf="paid.checked;else notSelected" >Paid</small>
<ng-template #notSelected>
<small>Click to set as paid</small>
</ng-template>
</mat-slide-toggle>
答案 2 :(得分:0)
和另一种解决方案
<mat-slide-toggle #slide formControlName="enabled">
<span>{{slide.checked?'label 1':'label 2'}}</span>
</mat-slide-toggle>
答案 3 :(得分:-1)
您可以尝试以下代码段:
<mat-slide-toggle formControlName="Policy1">
<span *ngIf="!Policy1.value">Message false</span>
<span *ngIf="Policy1.value">Message true</span>
</mat-slide-toggle>