Angular/Typescript - mappage de l'objet aux propriétés définies par l'utilisateur

Question

Je travaille actuellement sur un composant dans ng2 qui devrait présenter les données fournies par le paramètre (ce sera un tableau d'objets). Le problème est que les noms de propriété des objets dans le tableau fourni ne sont pas toujours les mêmes.

Tableau 1:

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

et dans différents scénarios LeTableau2:

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

Mon idée était de créer des propriétés d'entrée pour chacun des nom de la propriété, puis utiliser en quelque sorte les noms de carte réseau fourni dans nouveau tableau avec des propriétés statiques et l'utilisation de ce nouveau tableau pour présenter des données dans mon composant quelque chose comme ceci:

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

et un exemple de code pour utiliser ce composant serait quelque chose comme:

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

Quelqu'un pourrait-il me dire si c'est une bonne façon de faire face à cette tâche ou devrais-je le faire d'une autre manière? Malheureusement, selon l'opinion de mon chef d'équipe - créer une interface pour contrôler la structure ItemsSource fournie n'est pas une option. Le composant doit convertir Array lui-même.

Merci d'avance!

Answer 1

Faites votre interface en option à quelque chose comme ça

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

Mise à jour

Si vous n'êtes pas sûr du type de clé qui pourrait venir, la seule chose qui pourrait vous aider est de ne pas ici en utilisant une interface et en passant par les numéros d'index de tableau i: e 0, 1, 2.