2017-10-18 18 views
8

저는 ng2-smart-tables를 처음 사용합니다. GitHub 페이지에서 아래 예제를 수정하여 페이지간에 이동할 때 확인란이 사라지지 않도록하십시오.ng2 스마트 테이블 확인란이 모든 페이지에서 영구적이지 않습니다.

import { Component } from '@angular/core'; 

@Component({ 
    selector: 'basic-example-multi-select', 
    template: ` 
    <ng2-smart-table [settings]="settings" [source]="data"></ng2-smart-table> 
    `, 
}) 
export class BasicExampleMultiSelectComponent { 

    settings = { 
    selectMode: 'multi', 
    columns: { 
     id: { 
     title: 'ID', 
     }, 
     name: { 
     title: 'Full Name', 
     }, 
     username: { 
     title: 'User Name', 
     }, 
     email: { 
     title: 'Email', 
     }, 
    }, 
    }; 

    data = [ 
    { 
     id: 1, 
     name: 'Leanne Graham', 
     username: 'Bret', 
     email: '[email protected]', 
    }, 
    { 
     id: 2, 
     name: 'Ervin Howell', 
     username: 'Antonette', 
     email: '[email protected]', 
    }, 
    { 
     id: 3, 
     name: 'Clementine Bauch', 
     username: 'Samantha', 
     email: '[email protected]', 
    }, 
    { 
     id: 4, 
     name: 'Patricia Lebsack', 
     username: 'Karianne', 
     email: '[email protected]', 
    }, 
    { 
     id: 5, 
     name: 'Chelsey Dietrich', 
     username: 'Kamren', 
     email: '[email protected]', 
    }, 
    { 
     id: 6, 
     name: 'Mrs. Dennis Schulist', 
     username: 'Leopoldo_Corkery', 
     email: '[email protected]', 
    }, 
    { 
     id: 7, 
     name: 'Kurtis Weissnat', 
     username: 'Elwyn.Skiles', 
     email: '[email protected]', 
    }, 
    { 
     id: 8, 
     name: 'Nicholas Runolfsdottir V', 
     username: 'Maxime_Nienow', 
     email: '[email protected]', 
    }, 
    { 
     id: 9, 
     name: 'Glenna Reichert', 
     username: 'Delphine', 
     email: '[email protected]', 
    }, 
    { 
     id: 10, 
     name: 'Clementina DuBuque', 
     username: 'Moriah.Stanton', 
     email: '[email protected]', 
    }, 
    { 
     id: 11, 
     name: 'Nicholas DuBuque', 
     username: 'Nicholas.Stanton', 
     email: '[email protected]', 
    }, 
    ]; 
} 

이렇게하면 selectMode : 'multi'옵션을 사용하여 확인란이있는 열을 표시합니다. 확인란이 표시되지만 페이지 매김 링크를 사용하여 다른 페이지로 이동할 때마다 선택 항목이 지워집니다. 나는이 프로젝트와 비슷한 문제가 있기 때문에이 문제를 해결하려고 노력하고있다.

페이지 전체에서 선택 항목을 유지하는 방법에 대한 문서를 찾으려고했지만 한정된 양의 문서 만 사용할 수있어 성공하지 못했습니다. 이것은 거기에 더 많은 정보가 있어야만하는 공통적 인 기능인 것처럼 보이지만 그럴 것 같지 않습니다. 이 문제에 대한 도움을 주시면 감사하겠습니다.

답변

1
나는 NG2 스마트 테이블과 자신을 다중 선택 사용하지 않은,하지만 documentation

doEmit을 언급

: 부울 - 방출 이벤트 (테이블을 새로 고칩니다) 여부, 기본 = 진정한

잘 될지 모르겠지만 이것을 false으로 설정할 수 있습니다.

데이터에서 데이터 소스를 만든 다음 매기기 설정 수정 : 당신은 확인 및에 확인 된 행 수집 이벤트 리스너 추가 시도 할 수 있습니다, 문제가 해결되지 않으면

source: LocalDataSource; 

constructor() { 
    this.source = new LocalDataSource(this.data); 
    this.source.setPaging({ doEmit: false }); 
} 

그들을 재 - 선택 새로 고침 (또는 초기화). 표에 이벤트 콜백을 추가하십시오 ...

<ng2-smart-table [settings]="settings" [source]="source" (rowSelect)="onRowSelect($event)" (userRowSelect)="onUserRowSelect($event)"></ng2-smart-table> 

... 이벤트를 기록하고 거기에서 유용한 정보가 있는지 확인하십시오. 이 중 어느 것도 도움이되지 않으면

onRowSelect(event) { 
    console.log(event); 
} 

onUserRowSelect(event) { 
    console.log(event); 
} 

는 GitHub의에 대한 새로운 문제를 열고 개발자가이 문제를 해결하는 쉬운 방법을 알고 있기를 바랍니다. :-) 그게 실패하면, 내가 한 일을하고 각도/물질 2로 전환하십시오. 그들의 문서는 짜증나지만 전반적으로 나는 거기서 대부분의 구성 요소보다 낫다고 생각한다.

-1

응용 프로그램의 라이브를 따라 데이터를 유지하려면 "영구적 인 방법"으로이 데이터를 저장하고 ngOnInit에 저장된 데이터를 사용해야합니다. 구성 요소에서 , 나는 ngOnDestroy과 DataService의

@Component({ 
}) 

export class MyComponent implements OnInit,OnDestroy {} 
    variable1:number 
    variable2:number 
    contructor(private state:MyComponentData) 
    ngOnInit() { 
     let data=this.state.Data?data:null; 
     this.variable1=(data)?data.variable1; 
     this.variable2=(data)?data.variable2; 
    } 
    ngOnDestroy() 
    { 
     this.state.Data={ 
      variable1:this.variable1, 
      variable2:this.variable2 
     } 
    } 

서비스를 너무 쉽게

@Injectable() 
export class MyComponentData{ 
    Data:any; 
} 
되어 사용