更好的方法是在组件类中创建附加属性。
组件类别：

...
// if a & b changed, as instance you are subscribed 
// to Observable in your ngOnInit
isOk: boolean; 

ngOnInit(): void {
  this.httpService.getSomeData()
    .subscribe(data => this.isOk = data.a === 3 && data.b === 'foo');
  // don't forget to unsubscribe
}
...

在组件模板中：

<div *ngIf="isOk"></div>

换句话说，每次触发Angular 变化检测时，都会触发getter或方法。

为了获得最佳性能，应该将rxjs和| async管道结合使用。
例如，现在你有following application：

@Component({
  ...,
  template: `
    <h1 *ngIf="isOk()">Hello world!</h1>
    <input type="number" [(ngModel)]="a">
    <input type="text" [(ngModel)]="b">`,
})
export class App implements DoCheck {
  a = 0;
  b = '';

  isOk() {
    console.log('ran function');
    return (this.a === 3) && (this.b === 'foo');
  }

  ngDoCheck() {
    console.log('DoCheck');
  }
}

其结果如下：

请注意，每次更改时，函数都会运行多次。当我们只是聚焦其中一个文本框时，函数甚至会运行两次。
如果我们使用Observables，我们得到the following：

@Component({
  ...,
  template: `
    <h1 *ngIf="isOk$ | async">Hello world!</h1>
    <input type="number" [ngModel]="a$ | async" (ngModelChange)="a$.next($event)">
    <input type="text" [ngModel]="b$ | async" (ngModelChange)="b$.next($event)">
  `,
})
export class App implements DoCheck {
  a$ = new BehaviorSubject<number>(0);
  b$ = new BehaviorSubject<string>('');
  isOk$: Observable<boolean>;

  constructor() {
    this.isOk$ = combineLatest([this.a$, this.b$])
      .pipe(map(([a, b]) => {
        console.log('ran function');
        return (a === 3) && (b === 'foo');
      }));
  }

  ngDoCheck() {
    console.log('DoCheck');
  }
}

这样做的结果是：

请注意，rxjs map函数仅在其中一个输入发生变化时运行，不超过必要的程度。
此外，我们现在可以将ChangeDetection策略修改为OnPush：

• 使用first demo的OnPush：奇迹般的是，这似乎仍然工作的预期
• 使用second demo的OnPush：这现在是完全可能的，应该不会导致任何问题