汎用コンポーネントの作成-Angular2

Question

オブジェクトの配列（Person：Addressなど）とそれをマッピングするための対応するテンプレート（カードテンプレートと思われる）を受け入れる一般的なコンポーネントを作成したいとします。一度私がカードをクリックすると、私は編集することができ、カードのリストに戻って反映されているそれぞれのモデルプロパティでmodalpopupを取得します。

今まで私が達成したことは、 配列オブジェクトと対応するテンプレートを入力として受け取り、期待通りにカードを表示するCardListコンポーネントを作成しました。

私のデモコードリンク：https://stackblitz.com/edit/angular-mwyjic私は、対応するオブジェクトを取得するので、私は更新できるので、編集をクリックするだけで

。

は、だから私は達成することを望むものです： 1.私は、ポップアップで現在のオブジェクトの種類を認識できなければなりません（つまり、一人またはアドレス）私は現在のモデルに応じて可能な移入モーダル構造でなければなりません 2. [すべての可能なアプローチテンプレートをモーダルのリファレンスとして使用するか、モーダルテンプレートを入力として使用する方法について説明します。または私は反応的なフォームを構築するために有力なフォームを使用する必要がありますか？ ]この部分についての提案が必要です。 3.モーダルでアイテムの現在のオブジェクトを更新し、カードの変更を反映させます。

どのように進めることができますか？

Answer 1

タイプを知らなくてもオブジェクトのプロパティを抽出する方法が必要ですか？次に、私はTypescript（またはより良い、JavaScript）の反映を調べることをお勧めします。

あなたはクラスFooとBarを考えてみましょう：

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

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

彼らは仕事に定義されただけでなく、このために宣言する必要は注意してください。それは、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); 
     } 
    } 
}