現在、ng2のコンポーネントで作業しています。これは、パラメータによって提供されるデータを表示する必要があります(オブジェクトの配列になります)。問題は、指定された配列内のオブジェクトのプロパティ名が常に同じではないということです。角度/ Typescript - オブジェクトをユーザー定義のプロパティにマッピングする
アレイ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を単独で変換する必要があります。
ありがとうございます!
私はちょうどプロパティ名の2つの例を示しました。はるかに多くのことがあり、私は将来どのような名前が出るかを知ることができません。インターフェイスでオプションのプロパティを作成しても、テンプレートに表示する必要のあるプロパティはまだわかりません。 – Morgoth
@Morgothが答えを修正 –