2

用例

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

我设法得到了ctx.ngForOf变量，但我能做的就是。

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

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

工具

我在用

  • Visual Studio 代码与代码
  • 角 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
    },
    ...

调试到浏览器的屏幕截图

调试

4

3 回答 3

3

正如 Angular 文档所说：

将值转换为其 JSON 格式的表示形式。对调试很有用。

所以使用json管道知道 html 变量的内容：

HTML：

<p *ngIf="movies.results">Value of movies.results {{ movies.results| json }} </p>

更新：

无需为 Chrome 或 Visual Studio Code 安装其他扩展。你需要做什么：

  1. 通过 npm 命令运行您的应用程序。例如npm start。在引擎盖下TypeScript 编译器将创建映射文件
  2. 打开 Chrome 开发者工具并在yourComponent.ts文件中设置断点。谷歌工程师有一个关于如何在 Chrome 中调试 JS的很棒的教程。
  3. 如果要查看 HTML 模板的内容，请使用json管道

所以TypeScript文件可以在Chrome开发者工具中调试，HTML模板可以通过json管道调试。

于 2021-04-04T15:28:37.273 回答
2

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

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

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

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

  • ng.getOwningComponent($0).name = 'New Name'
  • 触发您键入的更改检测ng.applyChanges(ng.getOwningComponent($0))

有关更多详细信息，请参阅官方 Angular (v9+) 文档中的 API链接。

（编辑）

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

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

$apply/$applyChanges()：触发​​变化检测周期

于 2021-04-04T16:28:00.990 回答
1

如果要调试 HTML 文件中的变量，最好的方法是 Angular 中的 json 管道。让我再解释一下：

想象一下，您的 ts 文件中有一个对象数组，如下所示：

   const students = [
     {name : "John" , age : 21},
     {name : "Sarah" , age : 28},
     {name : "Rose" , age : 25},
    ];

If you want to loop through the array in the HTML file you must use *ngFor and iterate through the array : 

 <span *ngFor="let item of students">
  <span>
  {{item.age | json}}
  </span>
 </span>

使用这种技术，您可以调试 HTML 文件中的变量。有关更多信息， 请阅读此链接

于 2021-04-04T15:44:37.533 回答