В настоящее время я работаю над компонентом в 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 не вариант. Компонент должен конвертировать массив самостоятельно.
Заранее спасибо!
