無法添加屬性_ $訪問，對象是不可擴展的使用primeNG，2角和@ngrx

使用例

學習角2，並在個人項目。我有PrimeNg數據表，我想允許選擇它。使用redux實現ngrx，我的數據來自存儲並且很好地顯示在數據表中。但是當我選擇它時，我會遇到錯誤。我懷疑來自數據表組件的2路綁定[（選擇）]，但即使只有一種選擇方式，我仍然會出錯。你們有沒有想法如何在角度2中停止事件傳播，特別是由primeng框架生成的事件？

調試時，我可以看到這個事件對象的格式，我該如何停止事件傳播？

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

ERROR

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>

確定時代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()); 
    } 



}

來源

2016-11-21 altruistlife

所以我認爲你可能會使用ngrx-store-freeze這使得你的應用程序狀態不可擴展。然而，Datatable使用雙向綁定[（選擇）]，這會修改您的狀態。

這是什麼使得商店凍幹崩潰您的應用程序，讓您既可以禁用店凍結，在NGRX示例應用程序在這裏找到：https://github.com/ngrx/example-app/blob/master/src/app/reducers/index.ts#L79

或者，什麼可能爲你工作，以及，有一個本地陣列用於維護所選行但未鏈接到商店。

來源

2016-11-27 19:59:41 Isigiel

是的，你釘了它。我使用** ngrx-store-freeze **作爲我的開發環境。當我禁用它時效果很好。但是使用** ngrx-store-freeze **和本地數組會讓我的應用崩潰。這有點奇怪，因爲任何東西都與商店聯繫在一起。我需要弄清楚** ngrx-store-freeze **是如何工作的，因爲它看起來像凍結了一切。無論如何，它幫助我很多，歡呼。 – altruistlife

直到過濾被添加到NGRX店凍結，我用Lodash的copyDeep到「解凍」的對象本地在我的組件：

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

來源

2016-12-01 15:53:56

有報道PrimeNG的GitHub的一個問題涉及到你的問題 here。您可以訂閱該線程，並在修復時獲取更新。

來源

2016-12-21 10:28:16 hxuanhung

無法添加屬性_ $訪問，對象是不可擴展的使用primeNG，2角和@ngrx

回答

相關問題