仅当对象的属性已更改时，角度更新视图

Question

我每 15 秒从我的 Angular 应用程序中的 Web api 轮询一次数据。这导致我的角材质扩展面板返回到未扩展的默认位置并减慢网站速度，从而给用户带来不便。如果我用于更新视图的数据与视图的当前数据不同，我是否可以只更新视图？

下面是我的组件的代码。

              //component.html

                <mat-expansion-panel *ngFor="let item of vehicleDetail?.histalarm" class="expansion-panel">
                    <mat-expansion-panel-header>
                        <p class="mobil-font-size">
                            <!-- The date is highlighted in the color of the severity of the alarm-->
                            <span [ngClass]="getDetailColors(item.severity)"> {{ item.timestamp}} </span>
                            <span style="font-weight: bold;"> - Description: </span> {{ item.description }}.
                        </p>
                    </mat-expansion-panel-header>
                    <!-- All extra info is being displayed below. Translators is used for kind and severity
                    to make them more readable-->
                    <p>
                        <span class="bold"> More Information </span>
                        <br>
                        <span class="bold"> Severity: </span> {{ severityTranslator(item.severity) }}
                        <br>
                        <span class="bold"> Details: </span> {{item.details }}
                    </p>
                </mat-expansion-panel>

在我的 component.ts 中，我使用 ngrx store 从 web api 获取我的数据。 vehicleDetail 是选定的车辆，而 vehicleDetail?.histalarm" 用于循环遍历车辆存在的警报列表。

---

// component.ts
ngOnInit() {
   // init vehicles details
    this.store.select(fromStore.getAllVehicleDetails).subscribe(data => {
      this.vehicleDetails = data;
      this.setMarkers(this.selected);
      this.updateFavoriteVehicles();
    });
    this.store.dispatch(new fromStore.LoadVehicleDetails());
}

目前我最担心的是，当用户尝试阅读详细信息时，扩展面板会不断更新。发生这种情况是因为我告诉扩展面板每 15 秒更新一次，因为我希望更新时间戳和其他内容。然而，不断的中断令人沮丧，这就是我想要解决的问题。

编辑

发布reducer的代码以及请求

import * as fromVehicleDetails from '../actions/vehicledetails.action';
import { VehicleDetail } from '../../models/vehicle-detail';

export interface VehicleDetailsState {
  entities: { [id: number]: VehicleDetail };
  loaded: boolean;
  loading: boolean;
}

export const initialState: VehicleDetailsState = {
  entities: {},
  loaded: false,
  loading: false
};

export function reducer(
  state = initialState,
  action: fromVehicleDetails.VehicleDetailsAction
): VehicleDetailsState {
  switch (action.type) {
    case fromVehicleDetails.LOAD_VEHICLEDETAILS: {
      return {
        ...state,
        loading: true
      };
    }
    case fromVehicleDetails.LOAD_VEHICLEDETAILS_SUCCESS: {
      const vehicledetails = action.payload;
      const entities = vehicledetails.reduce(
        (
          entity: { [id: number]: VehicleDetail },
          vehicledetail: VehicleDetail
        ) => {
          return {
            ...entity,
            [vehicledetail.id]: vehicledetail
          };
        },
        {
          ...state.entities
        }
      );

      return {
        ...state,
        loaded: true,
        loading: false,
        entities
      };
    }
    case fromVehicleDetails.LOAD_VEHICLEDETAILS_FAIL: {
      return {
        ...state,
        loaded: false,
        loading: false
      };
    }
  }
  return state;
}

export const getVehicleDetailsEntities = (state: VehicleDetailsState) =>
  state.entities;
export const getVehicleDetailsLoaded = (state: VehicleDetailsState) =>
  state.loaded;
export const getVehicleDetailsLoading = (state: VehicleDetailsState) =>
  state.loading;

Answer 1

您遇到的问题是每次刷新数据时您都在替换状态中的对象。这意味着 NGRX 将通知任何订阅者选择该对象已更改，这意味着 Angular 将重新绘制 UI，因为 observable 已发出。

为了避免额外的重新绘制，您需要做的是在您的减速器中评估细节是否已更改，然后仅在细节已更改时才返回更新状态。要计算细节是否发生变化，您需要对从 API 返回的数据与当前处于状态的数据进行“深度相等”检查，例如：

 case fromVehicleDetails.LOAD_VEHICLEDETAILS_SUCCESS: {
      const vehicledetails = action.payload;
      const entities = vehicledetails.reduce(
        (
          entity: { [id: number]: VehicleDetail },
          vehicledetail: VehicleDetail
        ) => {
          return {
            ...entity,
            [vehicledetail.id]: vehicledetail
          };
        },
        {
          ...state.entities
        }
      );

      // Add logic to check if entities has changed, and not return the updated entities if they have not:
      if (deepEqual(entities, state.entities)) return { ...state, loaded: true, loading: false };

      // Entities have changed, return updated state with new entities:        
      return {
        ...state,
        loaded: true,
        loading: false,
        entities: entities
      };
    }

然后你需要实现一个 deepEquals 函数来评估新旧实体是否相同。 lodash have operators for doing this 之类的库，或者您可以编写自己的特定检查，了解刷新时可能更改的属性和内容。