我將如何動態地填充ng2-smart-table的角度4

Question

我對Angular相對來說比較新，並且在我想出一個辦法來解決這個問題之前遇到了嚴重的問題。 使用這個鏈接預覽解決方案

<https://plnkr.co/edit/OtJI13uA89caf8TG5lbI?p=preview>? 

Answer 1

要dymanically填充您的NG2智能表，你可以按照下面的步驟。 1.在你的模塊中導入智能表組件。 從「ng2-smart-table」導入{LocalDataSource};

2.將以下代碼添加到您的類中。

 @Component({ 
     selector: 'my-app', 
     template: ` 
     <div> 
      <h2>Hello {{name}}</h2> 
      <button (click)="addColumn()">Add Column</button> 
      <ng2-smart-table [settings]="settings" [source]="source"></ng2-smart-table> 
     </div> 

     `, 
    }) 
    export class ResultComponent implements OnInit 
     { 
     source: LocalDataSource; 
     i = 0; 
     settings; 
     mySettings = { 
     mode: 'inline', 
     actions: { 
      delete:false, 
     }, 
     add: { 
     confirmCreate: true, 
     }, 
     delete: { 
     confirmDelete: true, 
     }, 
     edit: { 
     confirmSave: true, 
     }, 
     columns: { 

     } 
     }; 

    //method that adds the column. You can use trigger events to do this 
    public addColumn() { 
      this.mySettings.columns["new column " + this.i] = { title: 'new column 
     ' + this.i.toString()}; 
      this.settings = Object.assign({}, this.mySettings); 
      this.i++; 
     } 

    }