Question

我有这种物体：

export class Foo {
    prop1: string;
    prop2: boolean;

    get computedProp() {
        return 'some computed data';
    }

    constructor(init?: Partial<Foo>) {
        Object.assign(this, init);
    }
}

export class Bar {
    propA: any;
    propFoo: Foo;

    constructor(init?: Partial<Bar>) {
        this.propFoo = new Foo();

        Object.assign(this, init);
    }
}

我会用这种方式：

export class MyComponent {

    private _propBar: Bar;
    get propBar() {
        return this._propBar;
    }
    @Input propBar(value: Bar) {
        // value is a json data fetched from api for example
        this._propBar = new Bar(value);
    }

}

这应该创建一个新的Bar（）对象，并允许我访问所有属性，但是Foo属性无法正确构建，因此computedPro无法访问，并给我html数据绑定错误。 / p>

我尝试了https://www.npmjs.com/package/class-transformer?activeTab=readme程序包，但没有好结果。

有什么想法吗？我想念什么？

谢谢

我创建此stackblitz来说明问题： https://stackblitz.com/edit/angular-xtgu6v?file=src%2Fapp%2Fapp.component.ts

Answer 1

在演示代码中，您必须将Bar构造函数更改为

constructor(init?: Partial<Bar>) {
    Object.assign(this, init);
    this.foo=new Foo(init.foo); // you will need to assign new foo object here else it will assign  {propA: 5, propB: 10 } to foo and sum will be undef
  }

代替

 constructor(init?: Partial<Bar>) {
        Object.assign(this, init);
      }

demo

无法访问嵌套对象的方法

1 个答案: