Angular/Typescript - 將對象映射到用戶定義的屬性

我目前正在研究ng2中的一個組件，它應該提供參數提供的數據（它將是數組對象）。問題是，提供的數組中的對象的屬性名稱並不總是相同的，即。Angular/Typescript - 將對象映射到用戶定義的屬性

陣列1：

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

，並在不同的情景數組2：

{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結構不是一種選擇。該組件必須自己轉換數組。

在此先感謝！

來源

2017-10-04 Morgoth

製作接口可選，以這樣的

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

更新

如果您不能確定，可能出現關鍵的類型，可以幫助你在這裏的唯一的事情是不使用一個接口，並通過數組索引號i：e 0,1,2。

來源

2017-10-04 08:31:27

我剛纔展示了兩個屬性名稱的例子。可能還有更多，我無法分辨將來會出現什麼名字。即使我在界面中設置了可選屬性，我仍然不知道需要在模板中顯示哪些屬性。 – Morgoth

@Morgoth提出了答案 –

Angular/Typescript - 將對象映射到用戶定義的屬性

回答

相關問題