javascript - 我如何动态填充 Ang2-smart-table 的列 Angular 4

Question

我对 Angular 比较陌生，在找到方法之前遇到了严重的问题。使用此链接预览解决方案

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

Answer 1

要动态填充您的 ng2-smart-table，您可以按照以下步骤操作。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++;
      }

     }