Angular 11 : How to debug the variables inside the html?

Question

用例

我想在我的 Angular 11 网络应用程序的 html 代码中调试变量。

我设法获得了 ctx.ngForOf 变量，但我只能做到这一点。

我的程序中缺少某些内容，但我找不到缺少的内容。

感谢您花时间回答这个问题

工具

我正在使用

• Visual Studio Code vscode
• Angular 11

我尝试了什么？

• 我发现变量 ctx 包含 ngForOf，其中包含从 Web 服务检索到的数据(20 项)。

ctx.ngForOf

    { 
        "adult": false,
        "backdrop_path": "/pcDc2WJAYGJTTvRSEIpRZwM3Ola.jpg",
        "genre_ids": [
            28,
            12,
            14,
            878
        ],
        "id": 791373,
        "original_language": "en",
        "original_title": "Zack Snyder's Justice League",
        "overview": "Determined to ensure Superman's ultimate sacrifice was not in vain, Bruce Wayne aligns forces with Diana Prince with plans to recruit a team of metahumans to protect the world from an approaching threat of catastrophic proportions.",
        "popularity": 7665.745,
        "poster_path": "/tnAuB8q5vv7Ax9UAEje5Xi4BXik.jpg",
        "release_date": "2021-03-18",
        "title": "Zack Snyder's Justice League",
        "video": false,
        "vote_average": 8.6,
        "vote_count": 4415
    },
    ...

浏览器调试截图

Answer 1

您可以使用调试 API 调试 HTML 中的变量:

• 右键单击感兴趣的元素，然后单击“检查”
• 在控制台中输入 ng.getOwningComponent($0)

这会注销该元素所属的组件以及所有属性和方法。

在这里你可以在控制台中更改属性并查看 HTML 中的效果，例如如果你的组件有一个名为 name 的属性，你可以更改它:

• ng.getOwningComponent($0).name = '新名称'
• 要触发更改检测，请键入 ng.applyChanges(ng.getOwningComponent($0))

更多详情here is a link到官方 Angular (v9+) 文档中的 API。

(编辑)

以下是在浏览器控制台中键入的一些有用的快捷方式:

$state/$scope/$context:元素调试信息

$apply/$applyChanges():触发变更检测周期