Angular 中的插值防止从 Action 中调用Reducer

Question

我正在开发一个 Angular 应用程序，它使用 ngrx 进行状态管理。

我向父组件引入了一个子组件，并注意到 ExistingAction 中的减速器没有被调用（ExistingAction）。

ParentComponent.html

...

<childComponent> </childComponent>
...

ParentComponent.ts

export class ParentComponent 

{

 ....

  this.store.dispatch(new ExistingAction());

...

}

ChildComponent.ts

    export class ChildComponent
    
    {
    
     displayString : any ;
    
    subscription$ : subscription;
    
    .... 
    
     ngOninit()
    
     {
    
       this.subscription$ = this.service.subscribe((content) => {
    
                                      this.displayString= content;
    
      }
    }
   ngOnDestroy()
   {
     this.subscription.unsubscribe();
   }
    
    ....
    
  }

ChildComponent.html

<label class="display">

  Sample : {{displayString['SelectSample']}}

</label>

服务的输出是 json，如“SelectSample”：“这是文本”

虽然ChildComponent.html中的上述代码在屏幕上打印了文本，并且在控制台中没有发现任何错误，但我发现由于引入了ChildComponent，ParentComponent中Action的Reducer fn不再被调用。

经过一系列的尝试和错误，我在 ChildComponent 中进行了以下更改，令人惊讶的是，Reducer 再次被调用，并且流程正常工作。 这是我改变的。

a) Sample : {{displayString}}  -> html changes
b) this.subscription$ = this.service.subscribe((content) => {
    
                                      this.displayString= content[SelectSample];
}  -> .ts changes

所以我的问题为什么像这样使用插值 {{displayString['SelectSample']}} 会阻止调用Reducer？插值和 ngrx 减速器之间有什么联系？我在任何地方都找不到答案

ChildComponent.ts

export class ChildComponent

{

 displayString : any ;

subscription$ : subscription;

.... 

ngOninit()

 {

   this.subscription$ = this.service.subscribe((content) => {

                                  this.displayString= content[SelectSample];

  }
 ngOnDestroy()
 {
   this.subscription.unsubscribe();
 }

....

}

ChildComponent.html

<label class="display">

  Sample : {{displayString}}

</label>