Angular 嵌套对象绑定在按钮 onclick 中不起作用

Question

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

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

Argument of type 'extension' is not assignable to the parameter of type 'string'

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

下面有更多详细信息

我正在使用的 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 作为参数传递，该函数似乎可以正常编译。我认为问题与嵌套有关。

Answer 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>

Angular 嵌套对象绑定在按钮 onclick 中不起作用

Angular nested object binding not working inside button onclick

javascript

angular

typescript

angular11