无法添加 属性 _$visited，对象无法使用 primeNG、angular 2 和 @ngrx 进行扩展

Question

用例

学习 Angular 2 并从事个人项目。我有来自 PrimeNg 的数据表，我想允许对其进行选择。 使用 redux 实现 ngrx，我的数据来自商店并在数据表中显示良好。但是当我对其进行选择时会出错。 我怀疑来自数据表组件的 2 种方式绑定 [(selection)] 但即使只有一种方式 [selection] 我仍然会出错。 你们知道如何停止 angular 2 中的事件传播，尤其是 primeng 框架生成的事件吗？

调试时可以看到这个事件对象的格式，如何停止事件传播？

data:Object
originalEvent:Object
checked:true
originalEvent:MouseEvent
__proto__:Object
type:"checkbox"
__proto__:Object

错误

core.umd.js?e2a5:3010 TypeError: Can't add property _$visited, object is not extensible
    at DomHandler.equals (eval at <anonymous> (http://localhost:8080/vendor.js:578:2), <anonymous>:254:28)
    at DataTable.isSelected (eval at <anonymous> (http://localhost:8080/vendor.js:656:2), <anonymous>:600:45)
    at _View_DataTable50.detectChangesInternal (/DataTableModule/DataTable/component.ngfactory.js:4074:198)
    at _View_DataTable50.AppView.detectChanges (eval at <anonymous> (http://localhost:8080/vendor.js:100:2), <anonymous>:9305:18)
    at _View_DataTable50.DebugAppView.detectChanges (eval at <anonymous> (http://localhost:8080/vendor.js:100:2), <anonymous>:9410:48)
    at _View_DataTable49.AppView.detectContentChildrenChanges (eval at <anonymous> (http://localhost:8080/vendor.js:100:2), <anonymous>:9323:23)
    at _View_DataTable49.detectChangesInternal (/DataTableModule/DataTable/component.ngfactory.js:3962:8)
    at _View_DataTable49.AppView.detectChanges (eval at <anonymous> (http://localhost:8080/vendor.js:100:2), <anonymous>:9305:18)
    at _View_DataTable49.DebugAppView.detectChanges (eval at <anonymous> (http://localhost:8080/vendor.js:100:2), <anonymous>:9410:48)
    at _View_DataTable0.AppView.detectContentChildrenChanges (eval at <anonymous> (http://localhost:8080/vendor.js:100:2), <anonymous>:9323:23)
    at _View_DataTable0.detectChangesInternal (/DataTableModule/DataTable/component.ngfactory.js:201:8)
    at _View_DataTable0.AppView.detectChanges (eval at <anonymous> (http://localhost:8080/vendor.js:100:2), <anonymous>:9305:18)
    at _View_DataTable0.DebugAppView.detectChanges (eval at <anonymous> (http://localhost:8080/vendor.js:100:2), <anonymous>:9410:48)
    at _View_FinancialaccountbookComponent0.AppView.detectViewChildrenChanges (eval at <anonymous> (http://localhost:8080/vendor.js:100:2), <anonymous>:9331:23)
    at _View_FinancialaccountbookComponent0.detectChangesInternal (/AccountbookModule/FinancialaccountbookComponent/component.ngfactory.js:305:8)
    at _View_FinancialaccountbookComponent0.AppView.detectChanges (eval at <anonymous> (http://localhost:8080/vendor.js:100:2), <anonymous>:9305:18)

数据表HTML

  <p-dataTable [value]="flows$ | async" sortMode="multiple" scrollable="true" scrollHeight="500px" [(selection)]="selectedFlows$ | async"
        scrollWidth="100%" [style]="{'margin-top':'30px', 'box-shadow': '2px 2px 5px grey'}" [responsive]="true" [styleClass]="shaddow-effect"
        (selectionChange)="selectionChange($event)">
        <p-column [style]="{'width':'38px'}" selectionMode="multiple"></p-column>
        <p-column *ngFor="let col of cols" [field]="col.field" [header]="col.header" [sortable]="true"></p-column>
        <footer>
            <ul>
                <li *ngFor="let flow of selectedFlows$ | async" style="text-align: left">{{flow.id + ' - ' + flow.date + ' - ' + flow.payee + ' - ' + flow.category}}</li>
            </ul>
        </footer>
    </p-dataTable>

DATABLE TS

@Component({
    selector: 'financialaccountbook',
    templateUrl: './financial-accountbook.component.html',
    changeDetection: ChangeDetectionStrategy.OnPush,
    providers: [FinancialflowService]
})
export class FinancialaccountbookComponent implements OnInit {

    cols: any[];
    flows$: Observable<FLOW[]>;
    flows:FLOW[];
    selectedFlows$: Observable<FLOW[]>;
    selectedFlows:FLOW[];
    nonselected: boolean;
    msgs: Message[];
    changeLog: string[] = [];


    constructor(private store: Store<fromRoot.State>, private financialflowService: FinancialflowService) { 
        this.flows$ = this.store.let(fromRoot.getFLows);
        this.selectedFlows$ = this.store.let(fromRoot.getSelectedFlows);

        // subscribe
        this.flows$.subscribe(v_flows=>this.flows = v_flows);
        this.selectedFlows$.subscribe(selectedflows => this.selectedFlows = selectedflows);

    }


    isFlowsSelected(): boolean {
        return (this.selectedFlows$) ? true : false;

    }

    selectionChange(selectedflows:FLOW[])
    {
         console.log(selectedflows);
        this.store.dispatch(new Actions.SelectAction(selectedflows.map(flow=>flow.id.toString())));
    }


    ngOnInit() {
        // fetch columns
        this.cols = FINANCIAL_FLOWS_COLS;
        // load flows
        this.loadFlows();

    console.log(this.selectedFlows);
    console.log(this.flows);
  //  this.flows$.subscribe(flows => console.log(flows));
    }
    loadFlows() {
        this.store.dispatch(new Actions.LoadAction());
    }



}

Answer 1

所以我认为您可能会使用 ngrx-store-freeze，这会使您的应用程序状态不可扩展。但是，数据表使用双向绑定 [(selection)] 来修改您的状态。

这就是商店冻结导致您的应用程序崩溃的原因，因此您可以禁用商店冻结，可在此处的 ngrx 示例应用程序中找到：https://github.com/ngrx/example-app/blob/master/src/app/reducers/index.ts#L79

或者，有一个本地数组也可能对您有用，它用于维护选定的行但不链接到存储。

Answer 2

在将过滤添加到 ngrx-store-freeze 之前，我使用 Lodash 的 copyDeep "thaw" 我组件中的本地对象：

constructor(private store: Store<fromRoot.AppState>) {
    //this.allApps$ = store.select("apps");
    store.let(fromRoot.getAllApps).subscribe(allApps => { this.allApps = _.cloneDeep(allApps); });
}

Answer 3

PrimeNG github 上报告了一个与您的问题相关的问题 here。您可以订阅该线程并在它被修复时获取更新。