为什么我需要使用默认的更改检测策略调用detectChanges()？

Question

我正在开发一个Angular 4应用程序,但我遇到了一个问题,因为我不得不this.changeDetectorRef.detectChanges();在模型更改时调用更新视图.例如,我有这个用于分页的代码:

changePage(pageNumber) {
  this.currentPage = pageNumber;
  // why do I need to do this?
  this.changeDetectorRef.detectChanges();
}

我已经明确地在组件上设置了更改检测策略,ChangeDetectionStrategy.Default但这没有任何效果.在订阅一个observable时也会发生这种情况:

showResults(preference) {
  this.apiService.get('dining_autocomplete/', `?search=${preference}`)
    .subscribe((results) => {
      this.searchResults = results;
      // why do I need to do this?
      this.changeDetectorRef.detectChanges();
  });
}

如果我console.log() this.searchResults在TypeScript中,我得到了预期的结果,但是如果我{{ searchResults }}在HTML中使用它,它就不会更新,直到其他事件发生,大概是当它经历另一个摘要周期时.

会发生什么事？

==编辑=============================================== ============

我的组件的代码如下所示:

import {ChangeDetectorRef, Component, Input, OnChanges} from "@angular/core";

import * as _ from 'lodash';

@Component({
  selector: 'dining-search-results',
  templateUrl: './dining-search-results.template.html',
  styleUrls: ['./dining-search-results.style.scss'],

})
export class DiningSearchResultsComponent {
  @Input() searchResults: any[];
  @Input() hotTablesOnly: boolean = false;
  @Input() memberBenefitsOnly: boolean = false;

  numberOfTagsToDisplay: number = 3;
  resultsPerPage: number = 5;
  currentPage: number = 1;

  constructor(private changeDetectorRef: ChangeDetectorRef) {
  }

  get filteredResults() {
    return this.searchResults ?
      this.searchResults.filter((r) => !((this.hotTablesOnly && !r.has_hot_table)
        || (this.memberBenefitsOnly && !r.has_member_benefit))) : [];
  }

  get pagedResults() {
    return _.chain(this.filteredResults)
      .drop(this.resultsPerPage * (this.currentPage - 1))
      .take(this.resultsPerPage)
      .value();
  }

  get totalPages(): number {
    return Math.ceil(this.filteredResults.length / this.resultsPerPage);
  }

  getInitialTags(tagsArray: any[], count: number): any[] {
    return _.take(tagsArray, count);
  }

  changePage(pageNumber) {
    this.currentPage = pageNumber;
    // why do I need to do this?
    this.changeDetectorRef.detectChanges();
  }
}

当changePage()调用并this.currentPage更新时,除非我调用,否则更改不会反映在HTML中detectChanges().

Answer 1

我已经解决了这个问题.

另一个向此组件发送通知的组件Observable.fromEvent()在Angular区域外运行,因此更改检测不会自动响应这些事件.这个关于区域的帖子和这个问题的StackOverflow帖子都有解决方案!