submit接口成功返回数据但是页面没有更新

 

员工后台管理系统-》商机详情页面-》备注列表页面点击头部tab按钮-》 submit接口成功返回数据但是页面没有更新

有一个备注列表页面，页面上有两个按钮A和按钮B，点击这两个按钮就会刷新列表，用于切换两种不同的类型的列表数据。

处理请求的数据如下：

/**
   * 刷新页面
   *
   * @param {*} pageIndex 当前页
   * @memberof RemarksListComponent
   */
  pageRefresh(pageIndex)
  {
    // 主要参数
    let tempParams = {
      pageNo: pageIndex,
      pageSize: this.tagData['data']['pageSize'],
      currentIndex: this.tagData['currentIndex'],
    };
    // 存在另外的参数
    if (this.tagData['paramMap']) {
      // 合并参数
      tempParams = Object.assign({}, tempParams, this.tagData['paramMap']);
    }
    // 参数
    const params = {
      content: tempParams,
      id: this.tagData['pagingQueryKey'],
      sessionId: localStorage.getItem('sessionId'),
    };
    this.tabData = [];
    // 提交数据
    this.http.post('application/submit', params).subscribe(res =>
    {
      // 请求状态
      if (res['success'] === true) {
        // 请求成功
        this.tagData = res['data'];
        this.tabData = res['data'].data.tabData;

      } else {
        this.tabData = [];
        // 错误信息
        this.msg.error(res['message']);
      }
    });
  }

问题来了：首次访问是有数据的。但是点击按钮B等列表页面刷新完之后在点击按钮A 页面空白，接口是返回了数据的。

处理方法如下：

/**
   * 刷新页面
   *
   * @param {*} pageIndex 当前页
   * @memberof RemarksListComponent
   */
  pageRefresh(pageIndex)
  {
    // 主要参数
    let tempParams = {
      pageNo: pageIndex,
      pageSize: this.tagData['data']['pageSize'],
      currentIndex: this.tagData['currentIndex'],
    };
    // 存在另外的参数
    if (this.tagData['paramMap']) {
      // 合并参数
      tempParams = Object.assign({}, tempParams, this.tagData['paramMap']);
    }
    // 参数
    const params = {
      content: tempParams,
      id: this.tagData['pagingQueryKey'],
      sessionId: localStorage.getItem('sessionId'),
    };
    this.tabData = [];
    // 提交数据
    this.http.post('application/submit', params).subscribe(res =>
    {
      // 请求状态
      if (res['success'] === true) {
        // 请求成功
        this.tagData = res['data'];
        this.tabData = res['data'].data.tabData;
        // 更改检测
        this.changeDetectorRef.markForCheck();
        this.changeDetectorRef.detectChanges();

      } else {
        this.tabData = [];
        // 错误信息
        this.msg.error(res['message']);
      }
    });
  }

解析，在按钮A和按钮B之间切换导致数据变动需要主动发起变更检测：

敲黑板：什么时候用这个changeDetectorRef，当你在页面上需要对某个视图进行重新喧渲染的时候。

查看官方文档：https://angular.io/api/core/ChangeDetectorRef

Base class for Angular Views, provides change detection functionality. A change-detection tree collects all views that are to be checked for changes. Use the methods to add and remove views from the tree, initiate change-detection, and explicitly mark views as dirty, meaning that they have changed and need to be rerendered.

我们看这个官方描述，这个是angular各种视图的基础类， 提供 变更 detection 能力也就是说使用这个类可以手动检测变更。

使用下面这些方法：

abstract class ChangeDetectorRef {
  abstract markForCheck(): void
  abstract detach(): void
  abstract detectChanges(): void
  abstract checkNoChanges(): void
  abstract reattach(): void
}

可以显示的标记视图为dirty ，意思是这些view需要重新渲染。使用方法如下：

this.changeDetectorRef.markForCheck();

this.changeDetectorRef.detectChanges();

 我们来看源码注释

export declare abstract class ChangeDetectorRef {
    /**
     * When a view uses the {@link ChangeDetectionStrategy#OnPush OnPush} (checkOnce)
     * change detection strategy, explicitly marks the view as changed so that
     * it can be checked again.
       当视图使用 OnPush（checkOnce）变更检测策略时，把该视图显式标记为已更改，以便它再次进行检查。
     *
     * Components are normally marked as dirty (in need of rerendering) when inputs
     * have changed or events have fired in the view. Call this method to ensure that
     * a component is checked even if these triggers have not occured.
     *
       当输入已更改或视图中发生了事件时，组件通常会标记为脏的（需要重新渲染）。
       调用此方法会确保即使那些触发器没有被触发，也仍然检查该组件。
     * <!-- TODO: Add a link to a chapter on OnPush components -->
     *
     */
    abstract markForCheck(): void;
    /**
     * Detaches this view from the change-detection tree.
     * A detached view is  not checked until it is reattached.
     * Use in combination with `detectChanges()` to implement local change detection checks.
       从变更检测树中分离开视图。 已分离的视图在重新附加上去之前不会被检查。 与 detectChanges() 
       结合使用，可以实现局部变更检测。
     *
     * Detached views are not checked during change detection runs until they are
     * re-attached, even if they are marked as dirty.
       即使已分离的视图已标记为脏的，它们在重新附加上去之前也不会被检查。
     *
     * <!-- TODO: Add a link to a chapter on detach/reattach/local digest -->
     * <!-- TODO: Add a live demo once ref.detectChanges is merged into master -->
     *
     */
    abstract detach(): void;
    /**
     * Checks this view and its children. Use in combination with {@link ChangeDetectorRef#detach
     * detach}
     * to implement local change detection checks.
     *
       检查该视图及其子视图。与 detach 结合使用可以实现局部变更检测。
     * <!-- TODO: Add a link to a chapter on detach/reattach/local digest -->
     * <!-- TODO: Add a live demo once ref.detectChanges is merged into master -->
     *
     */
    abstract detectChanges(): void;
    /**
     * Checks the change detector and its children, and throws if any changes are detected.
       检查变更检测器及其子检测器，如果检测到任何更改，则抛出异常。
     *
     * Use in development mode to verify that running change detection doesn't introduce
     * other changes.
       在开发模式下可用来验证正在运行的变更检测器是否引入了其它变更。
       
     */
    abstract checkNoChanges(): void;
    /**
     * Re-attaches the previously detached view to the change detection tree.
     * Views are attached to the tree by default.
     *
      把以前分离开的视图重新附加到变更检测树上。 视图会被默认附加到这棵树上。
     * <!-- TODO: Add a link to a chapter on detach/reattach/local digest -->
     *
     */
    abstract reattach(): void;
}
export declare const SWITCH_CHANGE_DETECTOR_REF_FACTORY__POST_R3__: typeof render3InjectChangeDetectorRef;