각도/Typescript - 사용자 정의 속성에 객체 매핑

Question

현재 매개 변수에 의해 제공된 데이터를 표시해야하는 ng2의 구성 요소 (객체 배열)에 작업 중입니다. 문제는 제공된 배열에있는 객체의 속성 이름이 항상 동일하지 않다는 것입니다.

배열 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 구조를 제어하기위한 인터페이스를 만드는 것은 옵션이 아닙니다. 구성 요소는 Array 자체를 변환해야합니다.

미리 감사드립니다.

Answer 1

같은 당신의 인터페이스 옵션 확인이

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

당신이 올 수도 키의 유형을 알 수없는 경우

가 여기에 당신을 도울 수있는 유일한 것은 없습니다입니다 업데이트 인터페이스를 사용하고 배열 인덱스 번호 i : e 0, 1, 2로 이동합니다.