ion-select не обновляется, когда находится внутри, тогда ng-содержимое пользовательского компонента - PullRequest
Новая
       57

ion-select не обновляется, когда находится внутри, тогда ng-содержимое пользовательского компонента

0 голосов
/ 01 марта 2019

У меня есть ионная страница с ion-select внутри пользовательского компонента, которая показывает себя, когда флаг isLoading имеет значение true.Обратный вызов ion-change делает сетевой запрос с использованием Observable, первая операция, которую выполняет обратный вызов, устанавливает флаг isLoading в значение true.

Когда запрос завершается, isLoading устанавливается в значение false, но ион-выберите пункт не обновляется, я не понимаю, в чем проблема.

Ниже я показываю использованный код, сетевой вызов заменен на delay (), который воспроизводит ошибку

Это ошибка?Это угловая проблема?Проведя три дня без успеха, мне нужна помощь

Пользовательский компонент HTML 

    <div>
      <div *ngIf="isLoading else theContent">
        loading...
      </div>
      <ng-template #theContent>
        <ng-content></ng-content>
      </ng-template>
    </div>

Пользовательский компонент машинопись 

    import { Component, OnInit, Input } from '@angular/core';

    @Component({
      selector: 'app-loading',
      templateUrl: './loading.component.html',
      styleUrls: ['./loading.component.scss']
    })
    export class LoadingComponent implements OnInit {
      private _isLoading = false;

      constructor() { }

      ngOnInit() {
      }

      begin() {
        this._isLoading = true;
      }

      end() {
        this._isLoading = false;
      }

      get isLoading() {
        return this._isLoading;
      }
    }

Страница HTML 

    <ion-content padding>
          <app-loading>
            <ion-select interface="popover" placeholder="select" [(ngModel)]="selected"
              (ionChange)="change($event)">
              <ion-select-option [value]="red">red</ion-select-option>
              <ion-select-option [value]="blue">blue</ion-select-option>
              <ion-select-option [value]="green">green</ion-select-option>
            </ion-select>
          </app-loading>
    </ion-content>

Страница Машинопись 

    import { Component, ViewChild } from '@angular/core';
    import { LoadingComponent } from '../loading/loading.component';
    import { empty, Observable, from, of } from 'rxjs';
    import { switchMap, finalize, delay } from 'rxjs/operators';

    @Component({
      selector: 'app-home',
      templateUrl: 'home.page.html',
      styleUrls: ['home.page.scss'],
    })
    export class HomePage {
      @ViewChild(LoadingComponent)
      private loadingComponent: LoadingComponent;

      selected: string;

      change() {
        this.loadingComponent.begin();
        of(null).pipe(
          delay(5000),
          finalize(() => this.loadingComponent.end()),
        ).subscribe(v => console.log('done'));
      }
    }
...