角4のng2-smart-tableの列を動的に埋め込む方法

Question

Angularには比較的新しく、深刻な問題がありました。 dymanicallyあなたNG2-スマートテーブルを移入するにはソリューション

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

Answer 1

をプレビューするには 使用このリンクは、以下の手順に従うことができます。 1.スマートテーブルコンポーネントをモジュールにインポートします。 "Local DataSource" from "ng2-smart-table"をインポートします。

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++; 
     } 

    }