Observable内部服务中的更改检测不起作用

Question

有一个输入表单控件，我要在其中订阅服务中的值更改，并根据输入值启用或禁用作为组件一部分的按钮。

服务

nameFormControl: FormControl = new FormControl('', Validators.required);
buttons: string[];
pageInfo;

ngOnInit() {
this.pageInfo = {
    buttons: [{
        name: 'cancel',
        disabled: false,
    },
        name: 'save',
        disabled: true,
    ]
}
    this.nameFormControl.valueChanges.subscribe(() => {
        this.pageInfo.buttons[1].disabled = !this.popupFormControl.valid;
    });
}

按钮组件

import {ChangeDetectionStrategy, Component, Input, OnInit} from '@angular/core';

@Component({
  selector: 'button-group',
  templateUrl: `<button *ngFor="button of buttons" type="button" class="button"
            (click)="clicked()"
            [disabled]="button.disabled">{{button.text}}</button>`,
  styles: [],
  changeDetection: ChangeDetectionStrategy.OnPush,
})

export class SdxButtonGroupComponent implements OnInit {

  @Input() buttons;

  constructor() {
  }

  ngOnInit() {
  }

}

在这里，我将更改检测策略设置为onPush，遍历按钮并将其呈现在UI中。当用户在输入中键入内容时，“保存”按钮将启用。

以下是我尝试过的选项：

我试图更改对象的引用，使其不可变

const newStateButtons = [...this.pageInfo.buttons];
newStateButtons[1].disabled = !this.nameFormControl.valid;
const newStatePageInfo = Object.assign({}, this.popupInformation);
newStatePageInfo.buttons = newStateButtons;
this.pageInfo = newStatePageInfo;

试图在可观察对象之内运行detectchanges（）函数

this.cdr.detectChanges();

试图运行刻度线

this.cdr.tick();

它们似乎都不起作用。仅当我在按钮组件中删除onPush策略时，它才起作用。

有人可以让我知道为什么更改检测在这种情况下不起作用吗？