angular2에서 편집 가능한 테이블을 사용하는 방법

각도로 편집 가능한 테이블을 사용하려고하지만 좋은 기사를 찾지 못했습니다. 누구든지 some.Thanks 제안 할 수 있습니다. 나는이 시도 ,angular2에서 편집 가능한 테이블을 사용하는 방법

<ng-table [config]="config.sorting" 
      (tableChanged)="onChangeTable(config)" 
      [rows]="rows" [columns]="columns" > 
</ng-table>

이 내 열 및 행이다,

rows: Array<any> = []; 
    columns: Array<any> = [ 
    {title: 'Name', name: 'accountname'}, 
    {title: 'Email', name: 'email', sort: false}, 
    {title: 'Phone', name: 'phone', sort: 'asc'}, 
    ];

하지만 난 각 column.How에 편집 및 삭제 버튼 내가 그것을 얻을 수 줄까?

출처

2016-10-31 MMR

표시 코드를. 시도한 것은 무엇이고 오류는 무엇입니까? – Sefa

Sefa, 내 코드를 편집했습니다. – MMR

[2 번 열의 ng2 테이블에 열에 버튼을 추가하는 방법] (http://stackoverflow.com/questions/40343134/how-to-add-buttons-to-columns-to-ng2-table- in-angular-2) (동일 op) –

angle2에 적합한 데이터 테이블 플러그인을 원한다면 PrimeNG를 추천 할 수 있습니다. 우리 프로젝트에서 사용하고있는 데이터 테이블은 편집 가능, 정렬, 필터링을 지원하여 정말 좋습니다. PrimeNG이

http://www.primefaces.org/primeng/#/datatableeditable 2. 각도

출처

2016-10-31 14:47:14 Webking

어디에서 다운로드 명령을 찾을 수 있습니까? – MMR

PrimeNG를 npm에서 사용할 수 있습니다. 기존 응용 프로그램이있는 경우 다음 명령을 실행하여 프로젝트에 다운로드하십시오. npm 설치 primeng - 저장 – Webking

primeng를 설치하려면 primeUI를 설치해야합니까? DataTable을 설치했거나 다른 컨트롤이 성공적으로 실행되지 않습니까? –

풍부한 UI 구성 요소의 모음이 link 좀 걸릴 수 있습니다, 그 좋은 예 지시문을 사용!

이

그가 사용하는 지침입니다 :

@Directive({ 
selector: '[contenteditableModel]' 
}) 
export class ContenteditableModelDirective implements OnChanges { 

    @Input('contenteditableModel') 
    public model: any; 

    @Output('contenteditableModelChange') 
    public update = new EventEmitter(); 

    private _lastViewModel: any; 

    constructor(private elRef: ElementRef) {} 

    public ngOnChanges(changes: SimpleChanges): void { 
    if(this._lastViewModel !== changes['model'].currentValue){ 
     this._lastViewModel = this.model; 
     this._refreshView(); 
    } 
    } 

    @HostListener('blur') 
    public onBlur() { 
    var value = this.elRef.nativeElement.innerText; 
    this._lastViewModel = value; 
    this.update.emit(value); 
    } 

    private _refreshView() { 
    this.elRef.nativeElement.innerText = this.model; 
    } 
}

을이 그것을 사용하는 방법입니다 :

<h2 contenteditable="true" [(contenteditableModel)]="text"></h2>

출처

2017-05-17 16:23:42

angular2에서 편집 가능한 테이블을 사용하는 방법

답변

관련 문제