创建通用组件-Angular2

Question

我希望创建一个通用组件，该组件接受对象的数组（例如：人，地址）和用于映射该映射的对应模板（sphipsaphips card template），这是可编辑的IE。单击卡后，我将获得具有各自模型属性的模量popup，我可以编辑并反映在卡片列表中。

到现在我所取得的成就是，我创建了Cardlist组件，该组件将数组对象和相应的模板作为输入，以预期显示卡片。

我的演示代码链接：https：//stackblitz.com/edit/angular-mwyjic

因此，单击"编辑"我会得到相应的对象，因此我可以更新。

所以我想实现的目标是：1.我应该能够在弹出窗口中识别当前对象类型（即人或地址）2.我应该能够根据当前模型（任何可能的方法）填充模态结构，或者我们可以将模板作为模态的参考？还是我们如何将模态模板作为输入。还是我需要使用Reative形式来构建反应性形式？]需要对这部分的建议。3.以模态更新当前对象并反映卡片的变化。

关于如何进一步进行的任何建议？

Answer 1

您需要一种在不知道类型的情况下提取对象属性的方法吗？然后，我建议您研究打字稿（或者更好，JavaScript） REFLECTION 。

可以说您有一个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);
        }
    }
}