Can'；t添加属性$visted，对象不能使用primeNG、angular 2和@ngrx进行扩展

用例

学习Angular 2并在个人项目中工作。我有来自Priming的datatable，我想允许对其进行选择。 使用redux实现ngrx，我的数据来自存储，并在datatable中显示良好。但是当我在上面做选择时，我会出错。 我怀疑datatable组件中存在双向绑定[（选择）]，但即使只有单向[selection]，我仍然会出错。 你们知道如何阻止angular 2中的事件传播，特别是由Priming框架生成的事件吗

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

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)

core.umd.js？e2a5:3010类型错误：无法添加属性$visted，对象不可扩展
在DomHandler.equals处（在(http://localhost:8080/vendor.js:578:2), :254:28)
在DataTable.isSelected（评估在(http://localhost:8080/vendor.js:656:2), :600:45)
在_View_DataTable50.detectChangesInternal（/DataTableModule/DataTable/component.ngfactory.js:4074:198）
at_View_DataTable50.AppView.detectChanges（评估at(http://localhost:8080/vendor.js:100:2), :9305:18)
at_View_DataTable50.DebugAppView.detectChanges（评估at(http://localhost:8080/vendor.js:100:2), :9410:48)
at_View_DataTable49.AppView.detectContentChildrenChanges（评估at(http://localhost:8080/vendor.js:100:2), :9323:23)
在_View_DataTable49.detectChangesInternal（/DataTableModule/DataTable/component.ngfactory.js:3962:8）
at_View_DataTable49.AppView.detectChanges（评估at(http://localhost:8080/vendor.js:100:2), :9305:18)
at_View_DataTable49.DebugAppView.detectChanges（评估at(http://localhost:8080/vendor.js:100:2), :9410:48)
at_View_DataTable0.AppView.detectContentChildrenChanges（评估at(http://localhost:8080/vendor.js:100:2), :9323:23)
在_View_DataTable0.detectChangesInternal（/DataTableModule/DataTable/component.ngfactory.js:201:8）
at_View_DataTable0.AppView.detectChanges（评估at(http://localhost:8080/vendor.js:100:2), :9305:18)
at_View_DataTable0.DebugAppView.detectChanges（评估at(http://localhost:8080/vendor.js:100:2), :9410:48)
在_View_FinancialaccountbookComponent0.AppView.detectViewChildrenChanges（评估在(http://localhost:8080/vendor.js:100:2), :9331:23)
在_View_FinancialaccountbookComponent 0.detectChangesInternal（/AccountbookModule/FinancialaccountbookComponent/component.ngfactory.js:305:8）
at_View_FinancialaccountbookComponent0.AppView.detectChanges（评估at(http://localhost:8080/vendor.js:100:2), :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>

{{flow.id+'-'+flow.date+'-'+flow.paye+'-'+flow.category}

数据表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());
    }



}

@组件({
选择器：'财务会计账簿'，
templateUrl:“./financial accountbook.component.html”，
changeDetection:ChangeDetectionStrategy.OnPush，
提供者：[金融流动服务]
})
导出类FinancialaccountbookComponent实现OnInit{
科尔斯：任何[]；
流量：可观测；
流量：流量[]；
selectedFlows$：可见；
selectedFlows:FLOW[]；
非选择：布尔；
msgs:Message[]；
更改日志：字符串[]=[]；
构造函数（私有存储：存储，私有financialflowService:financialflowService）{
this.flows$=this.store.let（fromRoot.getFLows）；
this.selectedFlows$=this.store.let（fromRoot.getSelectedFlows）；
//订阅
this.flows$.subscribe（v_flows=>this.flows=v_flows）；
this.selectedFlows$.subscribe（selectedFlows=>this.selectedFlows=selectedFlows）；
}
isFlowsSelected（）：布尔值{
返回（this.selectedFlows$）？真：假；
}
selectionChange（selectedflows:FLOW[]）
{
console.log（selectedflows）；
this.store.dispatch（newactions.SelectAction（selectedflows.map（flow=>flow.id.toString（）））；
}
恩戈尼尼特（）{
//获取列
this.cols=金融流；
//负荷流
这是loadFlows（）；
console.log（this.selectedFlows）；
console.log（this.flows）；
//this.flows$.subscribe（flows=>console.log（flows））；
}
loadFlows（）{
this.store.dispatch（new Actions.LoadAction（））；
}
}

因此我认为您可能会使用

ngrx store freeze

，这会使您的应用程序状态不可扩展。但是，Datatable使用双向绑定[（选择）]，它修改您的状态

这就是商店冻结使您的应用程序崩溃的原因，因此您可以禁用商店冻结，如ngrx示例应用程序中所示：

---

或者，您也可以使用一个本地数组来维护所选行，但不链接到存储。

在过滤添加到ngrx存储冻结之前，我使用Lodash的copyDeep在组件中本地“解冻”对象：

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

构造函数（私有存储：存储）{
//this.allApps$=store.select（“应用”）；
store.let（fromRoot.getAllApps.subscribe（allApps=>{this.allApps=..cloneDeep（allApps）；}）；
}

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

是的，你成功了。我将ngrx商店冻结用于我的开发环境。当我禁用它时，它工作得很好。但使用ngrx商店冻结和本地阵列会使我的应用程序崩溃。这有点奇怪，因为任何东西都与商店有关。我需要弄清楚ngrx store freeze在引擎盖下是如何工作的，因为它看起来像是冻结了所有东西。无论如何，这对我很有帮助，干杯。