使用 formControl 中的值切换段答案

【问题标题】：Toggle the segment using a value from formControl使用 formControl 中的值切换段
【发布时间】：2020-07-28 23:58:17
【问题描述】：

我有一个编辑页面，我从数据库中获取值。我正在尝试自动将值分配给 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>

我设法传送了标题和描述，但没有分配离子段。有什么建议我该怎么做？

【问题讨论】：

标签： angular ionic-framework form-control

【解决方案1】：

在您的情况下，您的 ion-segment-button 上的 value 属性是字符串“true”而不是 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。

【讨论】：