类型错误时不存在 Angular 属性

Posted 2023-03-31

【中文标题】类型错误时不存在 Angular 属性

【英文标题】：Angular Property does not exist on type error

【发布时间】：2020-11-22 03:01:52

【问题描述】：

在我的服务中，我有：

getCart(): Observable<Cart[]> 

    return this.http.get<Cart[]>(`$this.myApiUrl/data/`); 
 

在我的组件中：

my_data: Cart[]=[]

public loadCart() 

 this.cart_Service.getCart().subscribe((data: Cart[]) => this.my_data = data);

在我的 html 文件中：

<div *ngIf=" my_data">
    <p>  Grand Total :  my_data.grandTotal  </p>
</div>

我收到错误消息：“类型 'Cart[]' 上不存在属性 'grandTotal'” 谁能帮我解决这个错误？我尝试了许多在线解决方案，但都不起作用。

【问题讨论】：

看起来my_data 是一个数组，所以它没有grandTotal 属性。您要么使用了错误的类型 (Cart[])，要么需要遍历数组。如果您可以给我们一些从 API 返回的示例数据，我们可以提供进一步的帮助。

感谢您的回答。在我的模型中，我有 export class Cart id :number;购物车项目：（购物车项目）[]；总计：数字；

我认为你只需要将类型从Cart[] 更改为Cart。

您可以尝试在您的 HTML 中放置 my_data[0].grandTotal 而不是 my_data.grandTotal 吗？仅用于故障排除

您能否尝试使用邮递员或其他软件调用端点以确保端点正常工作？并且请确保您没有像您评论的那样在 url 中添加 2 个斜杠

【参考方案1】：

我终于解决了这个问题。在我的组件中，我将 my_data 的类型更改为 any；

my_data: any;

我还像这样更改了 getCart() 函数：

getCart(): Observable<Cart[]> 

    return this.http.get<Cart[]>(this.myAppUrl + this.myApiUrl);

【讨论】：

恭喜您解决了这个问题，我想提请您注意 1) 作为最佳实践，使用更严格的类型比使用更通用的类型更好，因此不建议使用 type "any " 当您确定类型将是 Cart[] 时，如果 Cart[] 类型给您带来问题，最好询问问题以修复它并使其以正确的方式工作。 2）还有一件事是在每个服务中定义“myAppUrl”变量不是一个好习惯，您应该考虑在角度环境变量文件中定义它angular.io/guide/build