创建通用组件-Angular2

我希望创建一个通用组件，它接受对象数组（例如：Person，Address）和相应的映射模板（可支持的卡片模板），该模板是可编辑的，也就是说，一旦我点击卡片，我就会得到modalpoup，其中包含我可以编辑的相应模型属性，并反映在卡片列表中

到目前为止，我所取得的成就是， 我创建了CardList组件，它以数组对象和相应的模板作为输入，按预期显示卡片

我的演示代码链接：

所以，点击编辑我得到相应的对象，所以我可以更新

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

---

关于如何进一步操作有什么建议吗？

您需要一种在不知道对象类型的情况下提取对象属性的方法吗？然后我建议您研究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有关——如果不在typescript中定义属性，编译后的javascript类就不会有所需的属性

然后，您可以获取如下属性并与之交互：

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

---

您需要一种在不知道类型的情况下提取对象属性的方法吗？然后我建议您研究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有关——如果不在typescript中定义属性，编译后的javascript类就不会有所需的属性

然后，您可以获取如下属性并与之交互：

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