angular - 子模型 getter 和 setter 不能以 2/4 Angular 工作

Question

我有一种情况，我定义了三个模型类，如下所示

export class Parent 
{
    name: string;
    containers: Container[];  
}

export class Container
{
    desc: string;
    sets: Sets[];  
}


export class Sets
{
    private _data?: any[];
    private _dataSet?: any[];

    get data() 
    {
        if (this.dataSet && this.dataSet.length > 0) 
        {
            return this._dataSet[0].data;
        }
        return this._data;
    }

    set data(data: any[]) 
    {
        this._data = data;
    }

    get dataSet() 
    {
        return this._dataSet;
    }

    set dataSet(dataSet: any[]) 
    {
        this._dataSet = dataSet;
    }
}

问题是:除非我执行 new Set( ) 显式(我不知道 new Set() 这是否真的有必要)。

例如:

"name": "vik",
"containers": [
{
    "desc": "something",
    "sets": [
    {
        "dataSet": [
        {
            "data":[
            {
                // Object
            }]
        }]
    }]
}]

当我这样做时:

let response:Parent = responseObj;
console.log(response.containers[0].sets[0].data)

它应该返回数据集 value，但它返回 undefined。

但如果我这样做:

let response:Parent = responseObj;
console.log(new Sets(response.containers[0].sets[0]).data)

返回正确的值。

我是否遗漏了什么或者我如何改进我的代码以使其正常工作？

Answer 1

问题是您的对象来自 HTTP。这是什么意思:

Http 是一种基于文本的格式。这意味着当您收到响应时，它是唯一的字符串，例如:

"{"foo":"boor"}"

然后你像 JSON.parse(data) 那样做 smth 并返回像这样的真实对象:

{foo: "bar"};

但是 JSON.parse 不会对您期望的 type 做任何事情。它不知道如何从对象的字符串实例中生成。它可以尝试制作一个简单的对象，仅此而已。

你看，你的数据对象没有关于它的类型、方法、getter/setter 等的信息。它只是关于平面数据又名 dto。所以，如果你想从你的 dto 中获取真实的类，你应该编写更智能的解析器，它将获取你的 dto 并从中创建预期类的真实实例。基本上你已经这样做了

new Sets(response.containers[0].sets[0])

所以您可以继续这样做，但是您会发现这些重复的代码遍布您的应用程序。我发现的最好方法是将 mapper 注入(inject)数据服务器并返回一个实例而不是 dto。因此，您的其他代码不会对这种“肮脏”的工作一无所知，并且将始终与“正常”对象一起工作。

希望这对您有所帮助。

更新:

const rawData = '{"name":"Vitalii"}';
const person1 = JSON.parse(rawData);

function Person({name}) {
  this.name = name;
  this.say = function() {
    console.log(`Hi, ${this.name}`);
  }
}

let person2 = new Person(person1);
person2.say();

// person1 and person2 have the same data inside. But: 

console.log(person2 instanceof Person); // true
console.log(person1 instanceof Person); // false

这是因为这个物体即使看起来很相似，但性质不同。