Angular 11：如何调试html中的变量？ 用例

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

我设法得到了

ctx.ngForOf

变量，但这就是我所能做的

我的程序中缺少一些东西，但我找不到缺少的东西

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

工具 我正在使用

• Visual Studio代码vscode
• 角度11

我试了什么？

• 我发现变量

  ctx

  包含

  ngForOf

  ，其中包含从web服务检索到的数据（20项）

ctx.ngForOf

{
“成人”：假，
“背景路径”：“/pcdc2wjayjttvrseiprzwm3ola.jpg”，
“类型识别码”：[
28,
12,
14,
878
],
“id”：791373，
“原始语言”：“en”，
“原版标题”：“扎克·斯奈德正义联盟”，
《概述》：“布鲁斯·韦恩决心确保超人的最终牺牲不会白费，他与戴安娜·普林斯联手，计划招募一支超人类团队，以保护世界免受即将到来的灾难性威胁。”，
“受欢迎程度”：7665.745，
“海报路径”：“/tnAuB8q5vv7Ax9UAEje5Xi4BXik.jpg”，
“发布日期”：“2021-03-18”，
“头衔”：“扎克·斯奈德正义联盟”，
“视频”：假，
“平均投票数”：8.6，
“计票”：4415
},
...

将调试的屏幕截图插入浏览器

将值转换为其JSON格式表示形式。有益于 调试

因此，使用

json

管道了解html变量的内容：

HTML:

movies.results{{{movies.results}的值

更新：

不需要为Chrome或Visual Studio代码安装其他扩展。 您需要做的是：

通过npm命令运行应用程序。例如，

npm启动

。幕后

打开Chrome开发者工具并在

yourComponent.ts

文件中设置断点。有一个很好的教程介绍如何使用

如果您想查看HTML模板的内容，请使用

json

pipe

---

因此，TypeScript文件可以在Chrome Developer工具中调试，HTML模板可以通过

json

pipe进行调试。

如果您想调试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>

const学生=[
{姓名：“约翰”，年龄：21}，
{姓名：“莎拉”，年龄：28}，
{姓名：“罗斯”，年龄：25}，
];
如果要在HTML文件中的数组中循环，则必须使用*ngFor并迭代该数组：
{{item.age | json}

---

使用此技术，您可以调试HTML文件中的变量。有关详细信息，请使用调试API调试HTML中的变量：

• 右键单击感兴趣的元素，然后单击“检查”
• 在控制台中键入

  ng.getOwningComponent（$0）

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

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

name

的属性，您可以更改它：

• ng.getOwningComponent（$0）。name='newname'

• 要触发更改检测，请键入

  ng.applyChanges（ng.getOwningComponent（$0））

有关API的更多详细信息，请参阅官方Angular（v9+）文档

（编辑）

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

$state/$scope/$context

：元素调试信息

---

$apply/$applyChanges（）

：触发更改检测周期

亲爱的@jseyed amir mehrizi，谢谢你的回答，不过我正在寻找一个集成到浏览器或Visual Studio代码中的解决方案。亲爱的@steppup，谢谢您的回答，不过我正在寻找一个集成到浏览器或Visual Studio代码中的解决方案。@Abdelkrim，请参阅我的更新答案谢谢@Steppup，我知道无法调试前端模板。不过我是用烧瓶/金杯做的。谢谢你的邀请feedback@Abdelkrim这实际上是使用web浏览器访问的。在元素上单击鼠标右键并单击“Inspect element”时，可以在浏览器控制台中通过键入

ng.getOwningComponent（$0）

-来访问它，

$0

指的是浏览器检查器中突出显示的实例。在那里你可以按照上面的描述调试和操作角度分量的值。@joan swanepoel，我明白了。谢谢你的提示！然而，我正在寻找一种在调试器内部工作的解决方案

   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>