Angular 存储区中的更改检测。选择订阅需要markForCheck。为什么？

“我的应用程序”组件正在订阅选定的应用商店。我将

changedtectionstrategy

设置为

OnPush

。 我一直在读关于这是如何工作的；需要更新对象引用以触发更改。 然而，当您使用异步管道时，Angular希望看到新的可观察到的变化，并为您进行MarkForCheck。 那么，为什么我的代码在触发订阅并将

channels$

设置为一个新的可观察的频道数组时不呈现频道的属性（除非我调用

MarkForCheck

）

@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 {
  channels$: Observable<Channel[]>;
  searchValue: string;
  showChannels = false;
  test: Channel;

  constructor(
    @Inject( Store)  private store: Store<fromStore.PodcastsState>,
    @Inject( ChangeDetectorRef ) private ref: ChangeDetectorRef,
  ) {}

  ngOnInit() {

    this.store.select( fromStore.getAllChannels ).subscribe( channels =>{
      if ( channels.length ) {
        console.log('channels', !!channels.length, channels);
        this.channels$ =  of ( channels );
        this.showChannels = !!channels.length;
        this.ref.markForCheck();
      }
    } );
  }

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

找到以下频道
{{channel.trackName}
`,
})
导出类PodcastSearchComponent实现OnInit{
通道$：可观察；
searchValue:string；
showChannels=false；
测试：信道；
建造师(
@注入（存储）私有存储：存储，
@注入（ChangeDetectorRef）私有引用：ChangeDetectorRef，
) {}
恩戈尼尼特（）{
this.store.select（fromStore.getAllChannels）.subscribe（channels=>{
if（通道长度）{
console.log（'channels'，！！channels.length，channels）；
此.channels$=共（个频道）；
this.showChannels=！！channels.length；
此.ref.markForCheck（）为；
}
} );
}

我尝试了多种解决方案，包括使用

主题

和调用

下一步

，但除非我调用MarkForCheck，否则这是行不通的

---

有人能告诉我如何避免打电话给markForCheck吗？

这可能有点难以解释，但我会尽我最大的努力。当你最初的观察到（商店）emits它没有绑定到模板。因为您使用的是OnPush更改检测，所以当这个可观察对象发出时，由于缺少绑定，它不会标记组件进行更改

您正试图通过覆盖组件属性触发更改标记。即使您正在组件属性本身上创建新引用，这也不会标记组件以进行更改，因为组件正在更改自己的属性，而不是将新值推送到组件上

您认为异步管道在发出新值时标记组件进行更改是正确的。您可以在此处的角度源中看到这一点：

但是，您会注意到，只有当值（称为

async

）与

async

管道一起使用的属性与

匹配时，这才有效。_obj

，即

async

管道已记录为正在发射的可观察对象的对象

由于您正在执行

channels$=

，

async===此操作。_obj

实际上是不真实的，因为您正在更改对象引用。这就是您的组件未标记为更改的原因

您也可以在我编写的Stackblitz中看到这一点。第一个组件覆盖传递给

async

管道的可观察数据，而第二个组件不覆盖它，并通过响应发出的更改来更新数据——这就是您要做的：

（我使用

timer

，因为这是一种模拟第三方未绑定可观察源的简单方法。使用输出绑定（例如单击更新）更难设置，因为如果在同一组件中执行，输出操作将触发更改标记）

您并没有失去一切--我建议您使用

this.channels$=this.store.select（…）

。

async

管道为您处理

.subscribe

。如果您使用

async

管道，您无论如何都不应该使用

.subscribe

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),
);

---

请注意，您也可以将

ngIf

与异步管道一起使用，这样您就无需使用

showconnels

谢谢您的详细回答。我认为您的分析是正确的，因为我后来注意到，如果我按两次搜索按钮，第二次搜索结果就会显示出来。这证明了您所说的关于将新引用从异步var重置为新的可观察分配。我尝试了您的建议，但是我正在运行一些其他奇怪的行为。首先，只要我的as模板

*ngFor

由于

showChannels

为false而不显示，我的控制台中就不会记录任何内容，除非我预设了

showChannels

为true并点击搜索。当我将模板中的

showconnels

替换为

（channels$| async）时，将在注释2中继续？.length！==0

确实有效，但控制台日志会触发两次。可能是因为ngIf正在触发OBERSABLE管道和实际的ngFor。由于键入问题，您的

筛选器

方法对我不起作用，但当我将其替换为

映射（通道=>通道）时，

，我可以在点击中做一个

channels.length

。但是，只有当我没有像上面所描述的那样在for循环中使用“*ngIf*”时，这个设置才会起作用。我觉得这一切都很有趣。（主题外：在评论中回答问题有点困难…）考虑问另一个问题我对你建议的

过滤器有输入问题（channels=>channels.length）

，因为它需要一个双爆炸（！！）才能成为布尔值。对于另一个问题，我问了另一个问题