第一

Question

我正在尝试设置为离子选择显示的初始数据。尽管我也有其他情况，但我将其范围缩小到了最简单的示例。这里的大多数问题似乎都在使用[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” 部分，现在可以使用了。当然，它不会成为反应形式的一部分...我认为这有点臭虫-我将继续挖掘，同时欢迎任何进一步的想法。

Answer 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>

Answer 2

您可能会想出很多方法

第一

 <ion-select [value]="selectedValue" 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>

在您的.ts文件中，您可以管理selectedValue来填充文件

第二

<ion-select [compareWith]="compareById">
  <ion-select-option *ngFor="let ... of ..." [ngValue]="...">
    ...
  </ion-select-option>
</ion-select>

和.ts文件中

compareById(object1, object2) {
    return object1.id === object2.id // or some condition
  }

请参阅compareWith

以及您可以尝试的[ngValue]="SomeValue"

Answer 3

我将其发布为答案，以防其他任何人陷入此困境。我不确定是否是由于ionic 4的早期发布问题引起的，但我通过重新排序ion-selecting线对其进行了修复。

 <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”。这是一个奇怪的...

离子选择设定起始值

3 个答案:

第一

第二