일반 구성 요소 만들기 -Angular2

Question

개체 배열 (예 : Person, Address) 및 편집 가능한 (즉, 카드 템플릿 인) 매핑을위한 해당 템플릿을 허용하는 일반 구성 요소를 만들고 싶습니다. 일단 카드를 클릭하면 각각의 모델 속성을 가진 modalpopup을 얻을 수 있으며 편집 할 수 있고 카드 목록에 다시 반영됩니다.

지금까지 내가 달성 한 것은 배열 개체와 해당 템플릿을 입력으로 사용하여 예상대로 카드를 표시하는 CardList 구성 요소를 만들었습니다.

내 데모 코드 링크 : https://stackblitz.com/edit/angular-mwyjic 내가 해당 개체를 얻을, 그래서 난 갱신 할 수 있도록 편집의 클릭에

.

그래서 내가 달성하기 위해 원하는 것입니다 : 1. 나는 팝업에서 현재 개체 유형을 인식 할 수 있어야한다 (즉, 사람 또는 주소) 나는 현재의 모델에 따라 수 채우기 모달 구조이어야한다 (2) 모든 가능한 접근 방식 또는 템플릿을 모달에 대한 참조로 사용할 수 있습니까? 아니면 모달 템플릿을 입력으로 가져갈 수 있습니까? 또는 나는 반응 형 형태를 만들기 위해 본질적인 형태를 사용해야합니까? ]이 부분에 대한 제안이 필요합니다. 3. 모달로 현재 항목을 업데이트하고 카드의 변경 사항을 반영하십시오.

어떻게 진행할 수 있습니까?

Answer 1

형식을 모른 채 개체 속성을 추출 할 방법이 필요합니까? 그럼 난 Typescript (또는 더 나은 아직, 자바 스크립트) 반사 봐 당신이 좋습니다.

class Foo { 
    private fooPropA: string = null; 
    public fooPropB: string = null; 
} 

class Bar { 
    private barPropA: number= null; 
    public barPropB: number = null; 
} 

가 작동이 정의뿐만 아니라 선언 할 필요가주의하십시오

는 클래스 Foo 및 Bar이 있다고 할 수 있습니다. typescript를 javascript로 컴파일하는 방법과 관련이 있습니다. 컴파일 된 javascript 클래스는 typescript로 정의하지 않으면 속성이 필요하지 않습니다.

그럼 당신은 얻을이 같은 특성과 상호 작용할 수 :

someMethod() { 
    let foo: Foo = new Foo(); 
    foo.fooPropA = "Hello"; 
    foo.fooPropB = "World"; 

    let bar: Bar= new Bar(); 
    bar.barPropA = 1; 
    bar.barPropB = 2; 

    this.logObject(foo); 
    this.logObject(bar); 
} 

logObject(obj: any) { 
    // field will not be listed in keys if it's declared, but not defined 
    const keys = Object.keys(obj); 

    for (const key of keys) { 
     console.log("key", key); 

     if (obj.hasOwnProperty(key)) { 
      console.log("value", obj[key]); 
      console.log("value type is:", typeof obj[key]); 

      if(typeof obj[key] === "string") { 
       obj[key] = "EDITED"; 
      } 

      if(typeof obj[key] === "number") { 
       obj[key] = 123; 
      } 

      console.log("new value:", obj[key]); 
     } else { 
      console.log("no prop found:", key); 
     } 
    } 
}