Question

我正在尝试在转发器中调用子对象方法的角度应用程序。我有一个选定的项目，其中包含公司项目。公司类有一个getAddressText（）方法，它返回公司的地址文本，我想在屏幕上显示。

以下是帮助我解释的代码。在应用程序中，我看到ctrl.selectedItem.Company被正确加载，但它似乎忽略了对该函数的调用。

HTML + AngularJS代码：

<span>{{ctrl.selectedItem.Company.getAddressText()}}</span>

打字稿：

namespace app.controllers {
    class MyController {
        public selectedItem: app.models.Item;
    }
}
namespace app.models {
    export class Item {
        public Company: Company;
        constructor() {}
    }
    export class Company {
        constructor() {}
        getAddressText(): string {
            return "Some text...";
        }
    }
}

Answer 1

问题是你从服务（json）获得普通的js对象。它们可能看起来像Item和Company（具有相同的属性），但它们没有预期的方法。
如果您想要提供所提及类型的实例，您应该将json对象映射到这些类型（例如，在您的服务中或使用$ http转换响应，如果您通过$ http服务获取数据）：

var convertedItems = jsonItems.map(i => {
    var item = new Item();
    item.Company = new Company();
    //map required properties from i (or use some library for cloning)
    return item;
});

另一种方法是将逻辑（方法）移动到辅助类，或者移动到控制器或服务，并保持数据对象清洁（在这种情况下，接口定义就足够了）。

AngularJS + Typescript：从HTML调用子对象方法

1 个答案: