使用 formControl 中的值切换段

Question

我有一个编辑页面，我在其中从数据库中获取值。我正在尝试将值自动分配给 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 未分配。有什么建议我该怎么做？

Answer 1

在你的例子中，你的 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>

查看 this stackBlitz example。

使用 formControl 中的值切换段

Toggle the segment using a value from formControl

angular

ionic-framework

form-control