Ionic: onClick of ion-select, как заполнить / обновить параметры?

Question

Я пытаюсь заполнить опции выбора иона при щелчке по этому полю.В первый раз, когда я нажимаю на поле выбора, я получаю модальные пустые всплывающие окна.Второй раз я получаю населенные варианты.

.ts

 loadLists() {
        this.car.getMakeList().then(res => {
            this.lists = res.makes;
        });
     }

.html

 <ion-item>
             <ion-label>Car Makes</ion-label>
             <ion-select (click)="loadLists()">
                 <ion-option *ngFor="let list of lists" value="{{ list.value }}">{{ list.label }}</ion-option>
             </ion-select>
        </ion-item>

Как заполнить или обновить параметры после ionDidViewLoad?Я пытался

ApplicationRef.tick (), NgZone.run (обратный вызов), ChangeDetectorRef.detectChanges ()

, чтобы обновить всплывающее окно параметров.

Но у меня ничего не получилось.

Answer 1

Один из способов сделать это -

1. Отключение выбора, чтобы щелчок не открывал его
2. Изменение стилей так, чтобы оно не выглядело какне включен
3. Обработка нажатия на ion-item для загрузки опций и открытия выбора

---

Пожалуйста, обратите внимание на рабочий поршень чтобы увидеть его в действии!

---

home.html

<ion-header>
  <ion-navbar>
    <ion-title>Home</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <ion-list>
    <!-- Handle the click on the ion-item instead of the ion-select -->
    <ion-item (click)="onOpenSelect()">
      <ion-label>Car Makes</ion-label>
        <!-- Add the disabled property to the ion-select -->
        <ion-select disabled>
          <ion-option *ngFor="let option of options" [value]="option.value">
           {{ option.label }}
          </ion-option>
        </ion-select>
      </ion-item>
  </ion-list>

</ion-content>

home.scss

page-home {
  /* Make the opacity to be 1 so it doesn't look like disabled */
  .item-select-disabled ion-label, 
  .select-disabled {
    opacity: 1 !important;
  }
}

home.ts

import { Component, ViewChild } from '@angular/core';
import { NavController, Select } from 'ionic-angular';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html',
  styleUrls: [ './home.scss' ]
})
export class HomePage {

  public options = [];
  @ViewChild(Select) select: Select;

  constructor(public navCtrl: NavController) {}

  public onOpenSelect(): void {
    console.log(`Options before opening: ${this.options.length}`);

    // We need to do this because otherwise the open()
    // event won't do anything since Ionic thinks the
    // component is disabled
    this.select.disabled = false;

    // Load the new options only if needed
    if(this.options.length === 0) {
      this.options = [
          { value: 1, label: 'Option 1' },
          { value: 2, label: 'Option 2' },
          { value: 3, label: 'Option 3' },
          { value: 4, label: 'Option 4' }
      ];
    }

    // Use a timeout to give some time to Angular
    // to update the view. The amount of time is not
    // important; it's just to run the code async
    setTimeout(() => {

      // Open the select
      this.select.open();

      console.log(`Options after opening: ${this.options.length}`);
    }, 100);
  }

}

Answer 2

Попробуйте заменить вид загруженной функции на

ionViewWillEnter(){
this.car.getMakeList().then(res => {
        this.lists = res.makes;
    });
}