离子选择设置起始值答案

【问题标题】：ion-select set start value离子选择设置起始值
【发布时间】：2019-10-15 00:54:42
【问题描述】：

我正在尝试设置为离子选择显示的初始数据。尽管我在另一种情况下也有它，但我已将其范围缩小到这个最简单的示例。这里的大多数问题似乎都在使用我认为不需要的 [ngModel]，因为我使用的是 Angular Reactive 表单。 html是：

  <form [formGroup]="userDetailsForm" (ngSubmit)="onSubmit()">

 ... some stuff
<ion-item>
  <ion-label>Gender</ion-label>
  <ion-select placeholder="Select One" formControlName="Gender">
    <ion-select-option value="3">Female</ion-select-option>
    <ion-select-option value="2">Male</ion-select-option>
    <ion-select-option value="1">Other</ion-select-option>
    <ion-select-option value="0">Prefer Not to Say</ion-select-option>
 </ion-select>
</ion-item>

 ... more stuff
<ion-button expand="full" type="submit">Submit</ion-button>

</form>

我的代码是：

  ngOnInit() {

    this.userDetailsForm = this.formBuilder.group({
    ... some stuff
     Gender: [],
    });
    this.userService.getUserServer().subscribe (user => {
      // console.log('Patching the form');
      this.userDetailsForm.patchValue(user);
      ... other irrelevant code
    },
      error => this.helper.showAlert('We cant connect to the server at the moment msg is:' + error)
    );

  }

该字段始终显示为空（占位符如图所示），我也尝试删除占位符并使用：

      <ion-select value ="3" formControlName="Gender">

无论我尝试什么，它都不会显示默认值或我设置的值... 对不起，如果这很明显，但我错过了什么？非常感谢。

编辑我试过删除它的 formControlName="Gender" 部分，现在它可以工作了。当然，除了它不会成为反应形式的一部分...我觉得这闻起来有点臭 - 同时我会继续挖掘，欢迎任何进一步的想法。

【问题讨论】：

标签： angular typescript ionic-framework ionic4

【解决方案1】：

您可以尝试使用占位符添加已选择的空选项：

<ion-select formControlName="Gender">
            <ion-select-option value="" selected="selected" hidden="hidden">Choose here</ion-select-option>
            <ion-select-option value="3">Female</ion-select-option>
            <ion-select-option value="2">Male</ion-select-option>
            <ion-select-option value="1">Other</ion-select-option>
            <ion-select-option value="0">Prefer Not to Say</ion-select-option>
</ion-select>

【讨论】：

对不起，我看到了你放在那里的东西，但不明白它是如何工作的，所以我试了一下，它没有。你放在那里的不是占位符，而是另一种选择。作为另一种选择，它正式出现在列表中。只是为了更清楚起见，该字段在启动时仍然是空白的。 - 你在使用 Ionic 4 吗？这在其他版本中是否有效？

【解决方案2】：

我已将此作为答案发布，以防其他人陷入此困境。我不确定这是否是由于我拥有的 ionic 4 的早期发布问题，但我通过重新排序 ion-select 线修复了它。

 <ion-select placeholder="Select One" value = {{userDetailsForm.value.Gender}} formControlName="Gender" >
    <ion-select-option value="3">Female</ion-select-option>
    <ion-select-option value="2">Male</ion-select-option>
    <ion-select-option value="1">Other</ion-select-option>
    <ion-select-option value="0">Prefer Not to Say</ion-select-option>
 </ion-select>

在 'formControlName = yyyy' 之前放置 'value = xxx' 来修复它。这是一个奇怪的...

【讨论】：