2017-10-04 14 views
0

現在、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を単独で変換する必要があります。

ありがとうございます!

答えて

0

この

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

ような何かにあなたのインターフェースをオプションに更新

あなたが来るかもしれない、キーの種類が不明な場合は、ここであなたを助けるかもしれない唯一のものはないですインタフェースを使用して、配列インデックス番号i:e 0、1、2を使用します。

+0

私はちょうどプロパティ名の2つの例を示しました。はるかに多くのことがあり、私は将来どのような名前が出るかを知ることができません。インターフェイスでオプションのプロパティを作成しても、テンプレートに表示する必要のあるプロパティはまだわかりません。 – Morgoth

+0

@Morgothが答えを修正 –

関連する問題