使用 formControl 中的值切换段
Toggle the segment using a value from formControl
我有一个编辑页面,我在其中从数据库中获取值。我正在尝试将值自动分配给 ion-segment。
我的 html 带有 formControl 和从数据库中获取数据的方法:
this.form = new FormGroup({
title: new FormControl(this.task.title,{
updateOn: 'blur',
validators: [Validators.required]
}),
description: new FormControl(this.task.description, {
updateOn: 'blur',
validators: [Validators.required, Validators.maxLength(180)]
}),
completed: new FormControl(this.task.completed, {
validators: [Validators.required]
})
});
<ion-list-header>Completed</ion-list-header>
<ion-segment formControlName="completed" value="completed">
<ion-segment-button value="true">
<ion-label>Yes</ion-label>
</ion-segment-button>
<ion-segment-button value="false">
<ion-label>No</ion-label>
</ion-segment-button>
</ion-segment>
我成功传输了标题和描述,但 ion-segment 未分配。有什么建议我该怎么做?
在你的例子中,你的 ion-segment-button 上的 value 属性是字符串 "true" 而不是真实值。要实现您正在寻找的东西,您需要这样的东西:
<ion-list-header>Completed</ion-list-header>
<ion-segment [value]="form.value.completed? 'yes' : 'no'">
<ion-segment-button value="yes">
<ion-label>Yes</ion-label>
</ion-segment-button>
<ion-segment-button value="no">
<ion-label>No</ion-label>
</ion-segment-button>
</ion-segment>
我有一个编辑页面,我在其中从数据库中获取值。我正在尝试将值自动分配给 ion-segment。
我的 html 带有 formControl 和从数据库中获取数据的方法:
this.form = new FormGroup({
title: new FormControl(this.task.title,{
updateOn: 'blur',
validators: [Validators.required]
}),
description: new FormControl(this.task.description, {
updateOn: 'blur',
validators: [Validators.required, Validators.maxLength(180)]
}),
completed: new FormControl(this.task.completed, {
validators: [Validators.required]
})
});
<ion-list-header>Completed</ion-list-header>
<ion-segment formControlName="completed" value="completed">
<ion-segment-button value="true">
<ion-label>Yes</ion-label>
</ion-segment-button>
<ion-segment-button value="false">
<ion-label>No</ion-label>
</ion-segment-button>
</ion-segment>
我成功传输了标题和描述,但 ion-segment 未分配。有什么建议我该怎么做?
在你的例子中,你的 ion-segment-button 上的 value 属性是字符串 "true" 而不是真实值。要实现您正在寻找的东西,您需要这样的东西:
<ion-list-header>Completed</ion-list-header>
<ion-segment [value]="form.value.completed? 'yes' : 'no'">
<ion-segment-button value="yes">
<ion-label>Yes</ion-label>
</ion-segment-button>
<ion-segment-button value="no">
<ion-label>No</ion-label>
</ion-segment-button>
</ion-segment>