Angular 4 属性在构建时类型对象上不存在答案

【问题标题】：Angular 4 Property does not exist on type Object on buildAngular 4 属性在构建时类型对象上不存在
【发布时间】：2017-12-02 08:18:41
【问题描述】：

我正在使用 Angular 构建一个项目，我使用 angular-cli 启动了该项目，当我尝试运行 ng build --prod 时，我不断收到此错误：

对象类型上不存在属性“描述”

产生此错误的代码如下：

export class AppComponent {
    product: Object = {};

    constructor(
        private store: StoreService,
        private request: RequestService,
    ) {
        this.product = this.request.getProduct(_id);
    }
}

<p>{{product.description}}</p>

我正在阅读一些关于此的内容，错误是因为我使用类型定义将产品定义为对象，但我没有传递任何属性定义。

我知道我可以定义一个接口，就像我对数组所做的那样，但我做不到。不知道是不是我定义错了，我是这样尝试的：

export interface ProductInterface {
    id: Number;
    description: String;
    title: String;
}

product: Object<ProductInterface> = {};

但这也给了我错误。我需要做些什么来避免这种情况？

【问题讨论】：

product 的类型应该是ProductInterface，而不是Object<ProductInterface>。
谁是getProduct
试试这个：ng build --prod --aot false
或者这个可能更好：ng build --prod --aot false --build-optimizer false
使用any 即product: any;

标签： angular typescript

【解决方案1】：

对于您的第一个示例。在您的 html 中，您是说产品具有属性描述（它不在对象类型上）

在你的第二个例子中。您最初将产品定义为一个空对象

product: ProductInterface = {};

缺少界面的必填字段。所以可以去掉初始化，离开

product: ProductInterface;

正如其他人所指出的，您不需要 Object 语法

【讨论】：

我有一个动态表单并且在编译时不知道任何表单控件，在编译时我得到了 ex:Property 'name' does not exist on type '{}'. 这种类型的表单的任何解决方案？
@NikhilRadadiya 如果您的对象中有未知属性，您可以添加动态属性product: {[key: string]: string} 这将允许您将任何键（类型字符串）分配给具有值（类型字符串）的对象。这称为索引签名 (basarat.gitbooks.io/typescript/docs/types/index-signatures.html)
非常感谢你，你救了很多人的命，这个索引结构就像一个魅力
@NikhilRadadiya 很高兴我能帮上忙！

【解决方案2】：

从我的情况..

ngOnInit(){
    this.product = this.request.getProduct(_id); // who is _id
}

只需在订阅时添加 data:any 即可。

this.request.getProduct(_id).subscribe((data: any) => {
   this.product=data;
});

当响应数据具有更多键值对时，这将很有帮助。（所以创建接口很难/耗时。）

但始终最好的做法是使用接口；）

【讨论】：

【解决方案3】：

首先我会简单地使用product: ProductInterface;，你甚至不必初始化它。

那么，这可能会解决你的错误{{ product?. description }}

【讨论】：

使用?是什么意思？
@celsomtrindade 是安全导航运算符（我相信它在其他语言中称为 elvis 运算符）concretepage.com/angular-2/…。基本上，在定义产品之前，angular 不会查找描述字段。没有它，您可能会收到无法读取未定义错误的属性描述。

【解决方案4】：

如果属性是动态的（编译时未知），你可以使用

someObject['someProperty']

而不是

someObject.someProperty

【讨论】：

【解决方案5】：

你必须在 OnInit 方法中定义请求，你的控制器实现 OnInit 接口并定义一个新方法

ngOnInit(){
    this.product = this.request.getProduct(_id); // who is _id
}

假设 getProduct() 是返回 observable 的 http 请求

this.request.getProduct(_id).subscribe((data) => {
   this.product=data;
});

【讨论】：

这不是重点，我只是删除了不必要的代码并忘记了这部分。请求功能运行良好。

【解决方案6】：

从服务器请求数据时使用any 而不是Object 是安全的，因为我们不知道服务器会返回什么。所以你不需要 typecheck 即：

export class AppComponent {
    product: any;

    constructor(
        private store: StoreService,
        private request: RequestService,
    ) {
        this.product = this.request.getProduct(_id);
    }
}

【讨论】：

虽然在编写它时这可能是正确的，但 TypeScript 已经包含 unknown 来服务于这个目的

【解决方案7】：

如果您使用命令ng serve 并构建成功。

May，build configuration有麻烦

也许你需要修改className.prod.ts，比如className.ts

【讨论】：

【解决方案8】：

在我的情况下，它将我的属性设置为 public

所以，只要改变这个

export interface ProductInterface {
    id: Number;
    description: String;
    title: String;
}

到这里

export interface ProductInterface {
    public id: Number;
    public description: String;
    public title: String;
}

【讨论】：