Angular/Typescript - 将对象映射到用户定义的属性

Question

我目前正在研究 ng2 中的一个组件，该组件应显示参数提供的数据（它将是对象数组）。问题是，提供的数组中对象的属性名称并不总是相同的，即。

数组 1：

{emplNo: 1, emplName: "John", emplCompany:"Volvo" }

和不同场景下的Array2：

{employeeNo: 1, employeeName: "John", companyName:"Volvo" }

我的想法是为每个属性名称创建输入属性，然后以某种方式使用这些名称将提供的数组映射到具有静态属性的新数组中，并使用这个新数组在我的组件中呈现数据，如下所示：

interface mappedObjectInterface { 
  number: number,
  name: string,
  companyName: string
}

@Component({
  selector: 'my-component',
  template: `
    <div *ngFor="let item of mappedItemsSource">
        {{item.number}}, {{item.name}}, {{item.companyName}}
    </div>

  `
})
export class MyComponent implements OnInit {

@Input() ItemsSource: Array<Objects>; //provided Array
@Input() numberPropertyName: string;  // name of number property
@Input() namePropertyName: string;    // name of name property
@Input() companyNamePropertyName: string;    // name of companyName property
}

mapItemsSource(numberName, nameName, companyNameName) {
    let mappedItemsSource:mappedObjectInterface  = this.ItemsSource.map(item => ({
        number: item.numberName, //here I want to use the  property name provided by numberPropertyName input parameter
        name: item.nameName, //here I want to use the  property name provided by namePropertyName input parameter
        companyName: item.companyNameName, //here I want to use the  property name provided by campanynamePropertyName input parameter

    }));
}

ngOnInit() {        
    this.mapItemsSource(this.numberPropertyName, this.namePropertyName, this.companyNamePropertyName)
}

使用此组件的示例代码如下：

<my-component [ItemsSource]="Data"
              [numberPropertyName]="'emplNo'"
              [namePropertyName]="'emplName'"
              [companyPropertyName]="'emplCompanyName'">    
</my-component>

有人能告诉我这是处理这项任务的正确方法还是我应该以其他方式来做？不幸的是，根据我的团队负责人的意见 - 创建接口来控制提供的 ItemsSource 结构不是一种选择。组件必须自行转换 Array。

提前致谢！

Answer 1

让你的界面对这样的东西是可选的

interface mappedObjectInterface { 
  emplNo?: number,
  employeeNo?: number,
  emplName?: string,
  employeeName?: string,
  companyName?: string,
  emplCompany?: string
}

更新

如果您不确定可能出现的键的类型，唯一可能对您有所帮助的方法是不使用接口并使用数组索引号，即：0、1、2。