Question

在我之前的一个问题（dynamically create md-card from API response）中，我根据API的大量响应动态创建卡片。

这是进行API调用的服务：

@Injectable()
export class WebSearchService {

  private readonly _results$$ = new BehaviorSubject([]);
  private readonly _isLoading$$ = new BehaviorSubject(false);

  public readonly results$ = this._results$$.asObservable().shareReplay();
  public readonly isLoading$ = this._isLoading$$.asObservable();

  public term: string;
  p: number; // page

  public config = {
    itemsPerPage: 10,
    currentPage: this.p,
    totalItems: 100
  };

  constructor(private http: Http){
  }

  search(term: string, page?: number){

    return this.http.get(`my/api/{term}`).do(response => {
      this._isLoading$$.next(false);
      this.config.totalItems = response.json().estimated_total;
      this.config.currentPage = this.p;
    })
      .map(response => response.json().results as WebResult[]).map(result => {
        this._results$$.next(result);
        this.term = term;
        return result;
      })
    .take(1);
  }

  updatePage(page: number){
    this.p = page;
    return this.search(this.term, page);
  }

}

使用服务结果的组件：

export class ResultsComponent implements OnInit {
  private readonly _results$$ = new BehaviorSubject([]);

  public readonly isLoading$ = this.webService.isLoading$;
  public results$ =  this.webService.results$;
  p = 1; //

  constructor(public webService: WebSearchService) { }

  ngOnInit() { //
  }

  changePage(page: number){
    console.log('Page: ' + page);
    this.results$ = this.webService.updatePage(page);
  }

和模板：

<ng-template [ngIf]="isLoading$ | async" [ngIfElse]="results">
  is loading ...
</ng-template>

<ng-template #results>
  <div class="container-fluid" *ngFor="let result of results | paginate: this.webService.config">
    <!-- cards get dynamically created here -->
  </div>
</ng-template>
<pagination-controls *ngIf="(results$ | async)?.length>0" maxSize="6"
                     previousLabel=""
                     nextLabel=""
                     align="center"
                     (pageChange)="changePage($event)"
                     class="my-pagination"
                     screenReaderPaginationLabel="Pagination"
                     screenReaderPageLabel="page"
                     screenReaderCurrentLabel="You are on page"
                     autoHide="true"
></pagination-controls>

我有另一个组件在服务中调用search方法。但是，如果在除第1页之外的任何页面上调用搜索，则视图不会更新。如果我转到结果视图的第3页，然后执行另一次搜索，则results$ observable会更新，但视图仍保留在旧搜索结果中。我必须在分页中手动更改为第1页以获得新结果。有没有办法自动刷新视图？

我尽力解释这个问题。该项目非常大，所以我无法创建一个plunkr但愿意解释/提供更多的代码。

感谢任何帮助。

Answer 1

您的observable的success或error函数很可能用完了Angular区域，这意味着当发出新值时，Angulars更改检测不会运行。当有问题的值更新时，您可以使用ChangeDetectorRef手动运行更改检测。

constructor(private cdr: ChangeDetectorRef) {} // inject in your constructor

myObservable.subscribe(value => {
  this.myValue = value; // update out of scope
  this.cdr.detectChanges(); // run change detection manually
});

您还可以尝试手动订阅results$ observable，并在每次新值到达时更新实例变量。实例变量用于ngFor指令。我删除了与您的代码无关的所有内容，并添加了一个快速示例来演示我的意思：

你的班级：

export class ResultsComponent implements OnInit {
  private results$ =  this.webService.results$;
  public results = [];

  constructor(private webService: WebSearchService, private cdr: ChangeDetectorRef) {
    this.results$.subscribe(result => {
      this.results = result;
      this.cdr.detectChanges();
    });
  }
}

你的模板：

<div *ngFor="let result of results | paginate: this.webService.config"></div>

<pagination-controls 
  *ngIf="results.length > 0" 
  maxSize="6" previousLabel="" 
  nextLabel="" 
  align="center" 
  (pageChange)="changePage($event)"
  class="my-pagination" 
  screenReaderPaginationLabel="Pagination" 
  screenReaderPageLabel="page" 
  screenReaderCurrentLabel="You are on page"
  autoHide="true">
</pagination-controls>

即使可观察到的变化，也不会更新

1 个答案: