角度嵌套对象绑定在按钮 onclick 内不起作用答案

【问题标题】：Angular nested object binding not working inside button onclick角度嵌套对象绑定在按钮 onclick 内不起作用
【发布时间】：2021-09-08 00:44:53
【问题描述】：

<button (click)=updateDetails(app.id, app.extension.applicationId)>
      click this button
</button>
<br/>
<span>{{ app.extension.applicationId }}</span>

如果我从我的 Angular 组件代码中删除 HTML 按钮元素，应用程序似乎正在正确打印 app.extension.applicationId 的值。但是如果我添加 HTML 按钮元素代码，那么我会在编译过程中看到以下错误，

“扩展”类型的参数不能分配给输入“字符串”

我在我的应用程序视图中使用嵌套对象。

更多详情如下

我正在使用的 Rest 服务响应

{
  "id": 86,
  "parentId": 65,
  "parentApplication": "Digital Tools",
  "extension": {
    "applicationId": 89,
    "applicationName": "ChatBot",
    "applicationRegion": "NA",
  }
}

updateDetails 方法签名

updateDetails(id: number, applicationId: string)

我创建的接口

interface Extension {
    applicationId: string;
    applicationName: string;
    applicationRegion: string;
}

export interface Application {
    id: number;
    parentId: string;
    parentApplication: string;
    extension: {
        [key: string]: Extension;
    };
}

应用程序正确打印所有 JSON 响应属性值，并且只有属性 app.extension.applicationId 在 Angular click 函数中使用时会引发错误。但是，如果我将 app.parentApplication 作为参数传递，则该函数似乎可以正常编译。我相信这个问题与嵌套有关。

【问题讨论】：

欢迎来到 StackOverflow，如果您能准确说明您的问题是什么，那就太好了。请在发布问题stackoverflow.com/help/minimal-reproducible-example 之前阅读此内容。请用更多信息更新问题。
您需要显示更多详细信息。 updateDetails() 函数的签名是什么？ app.extension.applicationId的类型是什么？

标签： javascript angular typescript angular11

【解决方案1】：

这是因为您的app.extension.applicationId 被视为Extension。

当我看到您从服务中获得的响应时，我认为 interface Application 是错误的。我想你想写这个：

export interface Application {
    id: number;
    parentId: string;
    parentApplication: string;
    extension: Extension; // <- this
}

您还忘记了 html 代码中 updateDetails 周围的引号：

<button (click)="updateDetails(app.id, app.extension.applicationId)">
      click this button
</button>

【讨论】：

非常感谢。这为我解决了这个问题。