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

我正忙于MeteorJS和RxJS，这是退出，但有时也有点混乱。 我现在的问题只是一个角度的NgRx问题，与MeteorJS无关

正如您在示例中所看到的，有一个基于

showconnels

的

ngIf

。此布尔值设置为

false

。但是，内部的异步for循环引用了my store.select。 但是，由于ngIf，管道中的运算符永远不会执行。这似乎是一个僵局。 如何使订阅开始工作

当我进行搜索时，它会将频道添加到存储中，

存储。如果
ngFor
循环周围没有
ngIf
，则选择将起作用

当我将if重新放置到
*ngIf=“（channels$| async）？.length！==0”
时，它将工作，但当我执行一次搜索时，
轻触会运行两次

使用
markForCheck
，带有subscribe的注释store.select实际上运行良好。在不使用
订阅
的情况下，您对最佳解决方案有何建议

  @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 ) );
  }

@组件({
选择器：“播客搜索”，
changeDetection:ChangeDetectionStrategy.OnPush，//如果您想让NGRX处理所有事情，请关闭此选项。没有手表。NgModel无法工作
模板：`
播客搜索
搜寻

找到以下频道
{{channel.trackName}
`,
})
导出类PodcastSearchComponent实现OnInit、OnDestroy{
通道$：可观察；
searchValue:string；
showChannels=false；
建造师(
私家店，
) {}
恩戈尼尼特（）{
this.channels$=this.store.select（fromStore.getAllChannels.pipe）(
过滤器（通道=>！！通道.长度），
//在这一点上，channels.length应该始终是真实的
轻触（频道=>{
console.log（'channels'，！！channels.length，channels）；
this.showChannels=！！channels.length；
}),
);
//this.store.select（fromStore.getAllChannels）.subscribe（channels=>{
//console.log（'channels'，！！channels.length，channels）；
//此.channels$=共（个频道）；
//this.showChannels=！！channels.length；
//此.ref.markForCheck（）为；
// } );
}
doSearch（）{
console.log（'search'，this.searchValue）；
this.store.dispatch（new fromStore.LoadChannels（this.searchValue））；
}
使用

如果您有多个订阅并且它们不是嵌套的，您也可以使用或。如果所有订阅同时完成，请使用
share
，否则应使用
shareReplay（1）

*ngIf="channels$ | async as channels"