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

您可以对其他数据执行相同操作，或将它们合并为一个函数。

根据所选图块更改网格列

1 个答案: