如何让 <Ion-select> 以反应形式显示表单加载的默认值

Question

我有很多这样的例子。使用 FormGroup，Ion Select，该值始终设置正确，但在我手动打开选择并关闭它之前什么都没有显示。这种行为使响应式表单对于编辑或更新完全无用，这实际上意味着它是无用的。我没有任何不需要选择的表单，虽然它可以很好地插入新值，但这意味着我已经构建了一个用于插入的表单和另一个完全不同的用于更新的表单。

我将在这里粘贴一些代码，但我相信使用 Ionic 3 的每个人都已经看到了这个问题。什么时候修复，有解决方法吗？

<ion-content>
  <div *ngIf="loginForm">
  <form [formGroup]="loginForm" (submit)="doLogin()">
    <ion-list>

      <ion-item *ngIf="lookupsProvider">
           <ion-label fixed>{{ 'PHONE_COUNTRY_CODE' | translate }}</ion-label>
           <ion-select type="input" name="country_id" formControlName="country_id">
               <ion-option *ngFor="let country of lookupsProvider.lookupData['countrys']"
                      value="{{ country['id'] }}">
                  <ion-item>
                   {{  this.optionText(country) }}
                  </ion-item>
               </ion-option>

           </ion-select>
      </ion-item>

....当然还有其他输入

在 .ts 文件中

     _buildForm() {

     this.loginForm = this.formBuilder.group({
        country_id: [this.settingsProvider.settings['USER_ID'], Validators.required],
        main_phone: ['', Validators.required], 
        password: ['', Validators.required]
     });

     this.loginForm.valueChanges.subscribe((v) => {
        console.log('Login loginForm.valueChanges: ' + v);
     });
  }

正如我提到的，值设置正确，但用户看到的只是一个空白选择...这是登录表单，但我们知道用户的国家，所以我们希望他们不必选择它.因为该值没有显示，用户最终不得不选择它以确保它被设置。

Answer 1

因此，在您可以轻松解决之前，您的当前解决方法如下：

<ion-select>
 <ion-option *ngFor="let country of countries" [selected]="country.id == userCountryId">
  ...
 </ion-option>
</ion-select>

在您的ion-option 上有一个[selected]="true" 会将其显示为ion-select 中的选定值

编辑

好的哇，使用表单时不起作用。好的。所以，我创建了a Plunkr in which this actually works。正如您在home.page.ts 中看到的，selectedCountry 是 2（'USA'），但在FormBuilder 中我传递的是'3'，即'DE'。

如果 plunkr 被删除，代码如下。

<ion-content padding>
  <p>No Form:</p>
  <ion-select>
    <ion-option *ngFor="let country of list" [selected]="country.id == selectedCountry">
      {{country.country}}
    </ion-option>
  </ion-select>

  <p>FORM: </p>
  <form [formGroup]="loginForm" (submit)="doLogin()">
      <ion-select formControlName="country_name">
        <ion-option *ngFor="let country of list" [value]="country.id">
          {{country.country}}
        </ion-option>
      </ion-select>
  </form>
</ion-content>

TS：

export class HomePage {

  appName = 'Ionic App';
  list = [
    {country: 'NL', id: 1},
    {country: 'USA', id: 2},
    {country: 'DE', id: 3}
    ];

  selectedCountry = 2;

  loginForm: FormGroup;

  constructor(public navController: NavController, fb: FormBuilder) { 
    this.loginForm = fb.group({
      "country_name": [3]
    });
  }

输出：

Answer 2

我根据@Priya 评论找到了答案。我有几个带有“静态”选项的选择：

<ion-select type="input" name="country_id" formControlName="country_id">
   <ion-option value="CA">Canada</ion-option>
   <ion-option value="US">United States</ion-option>
</ion-select>

将它们更改为使用 *ngFor 修复了这些：

在 .ts 文件中：

public countryOptions = [
   { value: 'CA', displayValue: 'Canada' },
   { value: 'US', displayValue: 'United States' }
];

在 .html 文件中：

<ion-select type="input" name="country_id" formControlName="country_id">
   <ion-option *ngFor="let country of countryOptions" value="{{ country.value }}">{{ country.displayValue }}</ion-option>
</ion-select>

我应该注意到，通过其中一个 Ionic 更新，一些问题得到了修复（我不知道是什么），但是几个月前确实有效的一些选择突然又开始工作了。

在所有其他选择中，基本上都是使用 *ngFor 的某种组合

请注意，我只是在此答案中输入了代码，因此可能存在一些拼写错误……但答案是使用 *ngFor 选项可以解决所有问题。