基于所选分幅更改网格列

Question

我正在使用angular应用程序中的一些仪表板组件，我是angular的新手

根据我选择的切片，我的格网需要更改

我当前的代码是

在Component.ts中

    tileId: any = '1';
public appliedcolumns =[{
    name: 'EmployeeId',
    type: 'number',
    sortable: true,
    hidden: false,
    displayName: 'Employee Id'
  },
  {
      name: 'EmployeeName',
      type: 'string',
      sortable: true,
      hidden: false,
      displayName: 'Employee Name',
  },
  {
    name: 'AppliedDate',
    type: 'dateTime',
    sortable: true,
    hidden: false,
    displayName: 'Approved Date',
  }] 

public approvedcolumns =[{
    name: 'EmployeeId',
    type: 'number',
    sortable: true,
    hidden: false,
    displayName: 'Employee Id'
  },
  {
      name: 'EmployeeName',
      type: 'string',
      sortable: true,
      hidden: false,
      displayName: 'Employee Name',
  },
  {
    name: 'ApprovedDate',
    type: 'dateTime',
    sortable: true,
    hidden: false,
    displayName: 'Approved Date',

  }} 
ngOnInit() {
this.getDetails("1");
}

getDetails(tileid: string) {
//getting data from backend
}

//on tile click event sending the new tile id to getdata
onClickMe(tile){
this.getDetails(tileId);
}

Html看起来像

<div class="panel"(click)="onClickMe(tile)"></div>

<div *ngIf="tileId == 1">
        <custum-grid-view class="" [jsonObject]="jsonData" [totalNoOfRecords]="totalNoOfRecords" [gridOptions]="gridOptions" [gridActions]="actions" [staticColumns]="appliedcolumns" (actionsEvent)="actionsEvent($event)"></custum-grid-view>
      </div>
      <div *ngIf="tileId == 2">
        <custum-grid-view class="" [jsonObject]="jsonData" [totalNoOfRecords]="totalNoOfRecords" [gridOptions]="gridOptions" [gridActions]="actions" [staticColumns]="approvedcolumns" (actionsEvent)="actionsEvent($event)"></custum-grid-view>
      </div>

我的所有代码对我来说都工作得很好，但我不希望在代码中出现硬代码值

我的仪表板中有4-5个磁贴，同一个Component.ts中有相同的4-5列对象，如何将它们从y组件中移出并从外部访问

Answer 1

如果没有服务器可以向您提供数据，则在Service中移动它们。

然后，您可以利用依赖注入并获得如下数据：

export class YourComponent {
    public appliedcolumns = [];
    public approvedcolumns = [];
    ...
    constructor(private dataService: DataService){
         this.appliedcolumns = this.dataService.getAppliedColumns();
         this.approvedcolumns = this.dataService.getApprovedColumns();
         //...etc
    }   
}

编辑：在服务中，您可以使用一个方法来根据索引检索数据。

// Inside DataService, for applied columns lets say
getAppliedColumnsDetailsByID(id: number){
   return this.appliedcolumns[id] ? this.appliedcolumns[id] : null;
}

您可以对其他数据执行相同的操作，也可以将它们组合到一个函数中。