将值从服务传递到组件或服务传递到模板

Question

我的 Service 方法中有一个 switch case 语句

我的服务.ts

mapGridData(data) {
let colDefObj: GridColumnDef;
const colDefArray = [];
const idToNameMap = {};
let gridDataArray = [];
let aDT: any;
data.attributeMetaData.forEach(subItem => {
  if (subItem.isHidden !== 'true') {
    switch (subItem.attributeDataType) {
      case 'INTEGER':
        aDT = 'numeric';
        break;
      case 'STRING':
        aDT = 'text';
        break;
      case 'DATE':
        aDT = 'date';
        break;
    }
    idToNameMap[subItem.attributeId] = subItem.attributeName;
    colDefObj = new GridColumnDef(subItem);
    colDefArray.push(colDefObj);
  }
});
if (data.attributeValues === null) { data.attributeValues = []; }
gridDataArray = data.attributeValues.map(attributeObj => {
  const row = { objectId: attributeObj.objectId };
  attributeObj.attributeList.forEach(attr => {
    row[idToNameMap[attr.attributeId]] = attr.attributeValue;
  });
  return row;
});
return { gridDataArr: gridDataArray, colDefArr: colDefArray };
}

我在多个组件中使用此服务，如下所示

我的组件.ts

const gridDataObj = this.gridService.mapGridData(data);

在我的组件 html 文件中，我需要绑定 aDT 值，如下所示

<kendo-grid-column *ngFor="let column of gridColDef" [filterable]="column.isFilterable === 'true' ? true : false" [sortable]="column.isSortable === 'true' ? true : false" [locked]="false" filter="{{aDT}}">

那么，如何在组件的模板中绑定服务值呢？ 请建议。 谢谢。

Answer 1

如何在组件模板中绑定服务值？ 请建议。

要将某些内容与template绑定，您需要一个组件级别的变量（而不是组件的 function 中的变量，例如let 、 const 、 var ）

在模板中，您使用的是{{aDT}}即不是任何 object 的一部分，只是普通变量，而不是您应该在组件中声明它，即public aDT并在您从服务接收数据时分配一个值。

需要考虑的要点：

1. 正如@Michael D 在评论中指出的那样，您没有为服务中的任何 object 分配任何aDT值，您只是声明了一个变量，并且每次迭代您只是为其分配了一个新值。

2. 您正在通过服务（即gridDataArray或colDefArray 。 根据您的要求，如果您想呈现如下内容：

<kendo-grid-column *ngFor="let column of gridColDef" [filterable]="column.isFilterable === 'true' ? true : false" [sortable]="column.isSortable === 'true' ? true : false" [locked]="false" [filter]="column.aDT">

那么它应该是colDefObj object 的一部分。

3. 不是优选的方式。 为您service

.
.
 let gridDataArray = [];
 let aDT: any;
 let aDTArray = []; // declare a variable that holds all the values 
.
.
.
colDefObj = new GridColumnDef(subItem);
colDefArray.push(colDefObj);
aDTArray.push(aDT); // push your values here 
.
.
.
.

return { gridDataArr: gridDataArray, colDefArr: colDefArray, aDT: aDTArray }; // return it here 

并在component.ts

public aDT: any[];
public gridDataObj: any ;


const gridDataObj = this.gridService.mapGridData(data);
this.adT = gridDataObj.adtArray ;
this.gridColDef = gridDataObj.colDefArr ;

并在template中

<kendo-grid-column 
*ngFor="let column of gridColDef; let i = index" 
[filterable]="column.isFilterable === 'true' ? true : false" 
[sortable]="column.isSortable === 'true' ? true : false" 
[locked]="false" 
[filter]="aDT[i]">
<!-- use on basis of index -->

如果它在某个地方对您有帮助，您应该重新访问并检查您的服务，了解如何根据您的需要返回aDT 。

附言

在filter template中，而不是filter={{aDT}}你应该 go for [filter]="aDT"