Question

我在自定义组件中有一个带有离子选择的离子页面，当标记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'));
      }
    }

离子选择在内部组件的ng-content内时不更新

0 个答案: