Question

我正在尝试使用可观察对象显示微调器，该可观察对象使用模板中的异步管道将其解析为布尔值。可观察值在服务中设置。我无法找出问题所在。可观察的值似乎解析为未定义。为什么这可能行不通？

Here是为该示例创建的堆栈闪电。

Answer 1

您不应该使用Subject()或在ngAfterViewInit中执行setLoader，此时您尚未.next(true)模板尚未订阅：

解决方案1：

export class AppComponent {
   loading$: Observable<boolean>;

   constructor(private myservice: MyService) {
     this.loading$ = myservice.loading$;
   }

   ngAfterViewInit() {
     this.myservice.setLoader(true);
   }
}

解决方案2：

export class AppComponent {
   loading$: Observable<boolean>;

   constructor(private myservice: MyService) {
     this.loading$ = myservice.loading$.pipe(
       shareReplay(1)
     );
   }

   ngOnInit() {
     this.myservice.setLoader(true);
   }
}

解决方案3：

private loadingSource = new ReplaySubject(1);

loading$ = this.loadingSource.asObservable();

constructor() { }

setLoader(isLoading: boolean) {
  this.loadingSource.next(isLoading);
}

Answer 2

它是未定义的，因为我们在尚未准备好视图的setLoader内部运行ngOnInit。那时，服务类中的loading$仍未定义。当模板呈现它时，绝对是未定义的。

我将setLoader移至ngAfterViewInit

import { Component, VERSION, AfterViewInit } from '@angular/core'; // import AfterViewInit
import { MyService } from './my.service';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewInit { // add AfterViewInit
 constructor(public myservice: MyService) {
 }

 ngOnInit() {

 }

 ngAfterViewInit() {
   this.myservice.setLoader(true); // move it here
 }
}

我还检查了模板中是否有错字，原始代码使用myservice.loader$，但应该是myservice.loading$。

<div *ngIf="myservice.loading$ | async">
  Loading
</div>

希望有帮助

角度：无法使用异步管道

2 个答案: