Angular/Typescript - Mapping-Objekt zu benutzerdefinierten Eigenschaften

Question

Ich arbeite derzeit an einer Komponente in ng2, die Daten von Parameter zur Verfügung gestellt werden soll (es wird Array of Objects sein). Das Problem ist, dass Eigenschaftsnamen der Objekte in dem bereitgestellten Array nicht immer gleich sind, dh.

Array 1:

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

und in anderen Szenario Array2:

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

Meine Idee Eingabeeigenschaften für die einzelnen Eigenschaftsnamen zu erstellen war und verwenden Sie dann irgendwie die Namen versehen Array abzubilden in neues Array mit statischen Eigenschaften und die Verwendung dieses neuen Arrays, um Daten in meiner Komponente in etwa so darzustellen:

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) 
} 

und ein Beispielcode, diese Komponente zu verwenden, wäre so etwas wie:

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

Könnte mir jemand sagen, ob das mit dieser Aufgabe zu tun, oder sollte es auf andere Weise ich eine richtige Art und Weise ist? Leider ist laut meiner Teamleitermeinung die Erstellung einer Schnittstelle zur Steuerung der ItemsSource-Struktur keine Option. Die Komponente muss Array selbst konvertieren.

Vielen Dank im Voraus!

Answer 1

Ihre Schnittstelle zu wie etwas optional Machen Sie diese

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

aktualisieren

Wenn Sie nicht wissen, welche Art von Schlüssel sind, dass das einzige, was kommen könnte, die Sie hier helfen könnten durch nicht ist Verwenden Sie eine Schnittstelle und gehen Array-Indexnummern i: e 0, 1, 2.