如何在angular2中使用可编辑的表

Question

我试图在角度使用可编辑的表但没有找到任何好文章，任何人都可以建议一些。谢谢。 我试过这个，

<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'},
  ];

但我想在每列上编辑和删除按钮。我怎么能得到它？

Answer 1

如果你想为angular2提供一个好的数据表插件我可以推荐PrimeNG，他们有一个我们在我们的项目中使用的数据表，非常好，支持可编辑，排序，过滤。 PrimeNG是Angular 2的丰富UI组件的集合。 http://www.primefaces.org/primeng/#/datatableeditable

Answer 2

你可以看看这个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>