无法分配给对象“[object Array] primeng”的只读属性“0”

Question

我想对数据表列进行排序，但是它不起作用。下面是我得到的代码和错误。当我从打字稿向后端发出服务器调用时，它可以工作。当我使用状态管理时，排序不起作用。

<th *ngFor="let col of columns" [pSortableColumn]="col.field" [ngSwitch]="col.field">
  {{col.header}}
  <p-sortIcon [field]="col.field" ariaLabel="Activate to sort"
  ariaLabelDesc="Activate to sort in descending order" ariaLabelAsc="Activate to sort in ascending order"></p-sortIcon>
</th>

设备动作

  export class LoadDeviceFail implements Action {
    readonly type = DeviceMgtActionTypes.LOAD_DEVICE_FAIL;
    constructor(public payload: string) { }
}
export class LoadDevices implements Action {
    readonly type = DeviceMgtActionTypes.LOAD_DEVICES;
    constructor() { }
}
export class LoadDevicesSuccess implements Action {
    readonly type = DeviceMgtActionTypes.LOAD_DEVICES_SUCCESS;
    constructor(public payload: DeviceModel[]) { }
}

设备效果

 @Effect()
  loadDevices$ = this.action$.pipe(
    ofType(
      deviceMgtActions.DeviceMgtActionTypes.LOAD_DEVICES
    ),
    switchMap((action: deviceMgtActions.LoadDevices) =>  this.restApiService.getAll('/iot/Devices/AllDevices').pipe(
   
        mergeMap((devices: DeviceModel[]) => [
          new deviceMgtActions.LoadDevicesSuccess(devices),
          new deviceMgtActions.ShowLoader(false),
                 ]),
        catchError((error) =>
          of(
            new deviceMgtActions.LoadDevicesFail(error),
            new deviceMgtActions.ShowLoader(false)
          )
        )
      )
    )
  );

device.reducer

switch (action.type) {
case DeviceMgtActionTypes.LOAD_DEVICES_SUCCESS:
  return {
    ...state,
    devices: action.payload,
    error: '',
  };
case DeviceMgtActionTypes.LOAD_DEVICES_FAIL:
  return {
    ...state,
    devices: [],
    error: action.payload,
  };

设备.ts

getDevices(): void {
     this.store.dispatch(new deviceMgtActions.ShowLoader(true));
     this.store.dispatch(new deviceMgtActions.LoadDevices());
}

构造函数

constructor(private store: Store<fromDeviceMgt.State>)
 this.store.pipe(select(fromDeviceMgt.getDevices),
    takeWhile(() => this.componentActive))
    .subscribe((devices: DeviceModel[]) => {
      this.devices = devices;});
}

Answer 1

我已经找到答案了。在构造函数中，当您监听 getdevices 时，您必须使用cloneDeep 来创建该值的深层副本。

 this.store
  .pipe(
    select(fromDeviceMgt.getDevices),
    takeWhile(() => this.componentActive)
  )
  .subscribe((devicesLoaded: DeviceModel[]) => {
    this.devices = cloneDeep(devicesLoaded);
  });

你必须从'lodash/cloneDeep'导入cloneDeep；