0

我有一个离子页面，在一个自定义组件内有一个离子选择，当标志isLoading为真时它会显示自己。ion-change 回调使用 Observable 发出网络请求，回调执行的第一个操作是将isLoading标志设置为 true。

当请求完成isLoading设置为 false 但离子选择项未更新时，我不明白问题出在哪里。

下面我展示了使用的代码，网络调用被替换为重现错误的延迟（）

这是一个错误吗？这是一个角度问题吗？在花了三天没有成功后，我需要帮助

自定义组件 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'));
      }
    }
4

0 回答 0