angle2で編集可能なテーブルを使用する方法

Question

角度で編集可能なテーブルを使用しようとしていますが、良い記事が見つかりませんでした。 私はこれは、私の列と行である

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

が、私は編集をしたいし、各column.Howのボタンを削除

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

、これを試してみました私はそれを得ることができますか？

Answer 1

あなたはangular2のために良いのDataTableのプラグインが必要な場合、私は、彼らは我々が編集可能、ソート、フィルタリングのサポートには本当に良いです私たちのプロジェクトで使用しているデータテーブルを持って、PrimeNGをお勧めすることができます。 PrimeNGあなたがディレクティブを使用して、その良い例が、このlinkを見てみることができますアンギュラ2. http://www.primefaces.org/primeng/#/datatableeditable

Answer 2

のための豊富なUIコンポーネントのコレクションです！

これは、彼が使用しディレクティブです：

@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>