由于 ngIf 语句，存储选择未运行

我正忙于 MeteorJS 和 RxJS，它们正在退出，但有时也有点令人困惑。 我当前的问题只是 Angular NgRx 问题，与 MeteorJS 无关。

正如您在示例中看到的，有一个ngIf基于showChannels。该布尔值设置为false。然而，里面的async for循环引用了我的store.select。 然而，由于 ngIf，管道中的运算符永远不会被执行。看来是陷入了僵局。 如何使订阅开始工作？

当我进行搜索时，它会将频道添加到商店，并且store.select如果没有的话会起作用ngIf周围的ngFor loop.

当我将 if 替换为*ngIf="(channels$ | async) ?.length !== 0"它会起作用，但随后tap当我进行一次搜索时运行两次。

带有 subscribe 的注释 store.select 实际上可以很好地使用markForCheck。关于不使用时最好的解决方案的任何建议subscribe?

  @Component({
    selector: 'podcast-search',
    changeDetection: ChangeDetectionStrategy.OnPush, // turn this off if you want everything handled by NGRX. No watches. NgModel wont work
    template: `
      <h1>Podcasts Search</h1>
      <div>
        <input name="searchValue" type="text" [(ngModel)]="searchValue" ><button type="submit" (click)="doSearch()">Search</button>
      </div>
      <hr>
      <div *ngIf="showChannels">

        <h2>Found the following channels</h2>
        <div *ngFor="let channel of channels$ | async" (click)="loadChannel( channel )">{{channel.trackName}}</div>
      </div>
    `,
  })

  export class PodcastSearchComponent implements OnInit, OnDestroy  {
    channels$: Observable<Channel[]>;
    searchValue: string;
    showChannels = false;

    constructor(
      private store: Store<fromStore.PodcastsState>,

    ) {}

    ngOnInit() {

      this.channels$ = this.store.select(fromStore.getAllChannels).pipe(
        filter(channels => !!channels.length),
        // channels.length should always be truthy at this point
        tap(channels => {
          console.log('channels', !!channels.length, channels);
          this.showChannels = !!channels.length;
         }),
      );
    // this.store.select( fromStore.getAllChannels ).subscribe( channels =>{
    //   console.log('channels', !!channels.length, channels);
    //   this.channels$ =  of ( channels );
    //   this.showChannels = !!channels.length;
    //   this.ref.markForCheck();
    // } );

    }

  doSearch() {
    console.log( 'search', this.searchValue );
    this.store.dispatch( new fromStore.LoadChannels( this.searchValue ) );
  }

Use the ngIf as syntax https://angular.io/api/common/NgIf#storing-conditional-result-in-a-variable

*ngIf="channels$ | async as channels"