Angular教程

Angular 错误修复

由于多种原因,您可能会在Angular中遇到错误。
让我们举个例子来看一些特定类型的错误。
我们创建了一个名为" testing-app"的应用。在此应用中,我们在页面上有一个服务器和一个按钮,可以创建其他服务器。
此处," component.html "文件包含以下代码:
<div class="container">
  <div class="row">
 <div class="col-xs-12">
   <h2>My Servers</h2>
   <button class="btn btn-primary" (click)="OnAddServer()">Add Server</button>
 <br><br>
 <ul class="list-group">
   <li
   class="list-group-item "
   *ngFor="let server of servers; let i = index"
   (click)="onRemoveServer(i)">{{ server }}
   </li>
 </ul> </div>
 </div>
component.ts文件:
import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'testing-app';
  servers;
  OnAddServer() {
    this.servers.push('Another Server Added');
  }
  onRemoveServer(id: number) {
    const position = id + 1;
    this.servers.splice(position, 1);
  }
}
查看输出:
现在,如果单击"添加服务器"按钮,它将不会添加任何服务器。打开浏览器控制台以查看错误类型。
角度错误修复
您可以看到它显示" push"属性未定义。在这里,您可以获得有关错误的一些有用信息。
让我们检查component.ts文件:
import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'testing-app';
  servers;
  OnAddServer() {
    this.servers.push('Another Server Added');
  }
  onRemoveServer(id: number) {
    const position = id + 1;
    this.servers.splice(position, 1);
  }
}
在这里,我们已声明服务器,但尚未初始化。因此,我们将其设置为数组格式以保留新创建的服务器。因此,将其更改为:
servers= [];
更改组件。
import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'testing-app';
  servers = [];
  OnAddServer() {
    this.servers.push('Another Server Added');
  }
  onRemoveServer(id: number) {
    const position = id + 1;
    this.servers.splice(position, 1);
  }
}
输出:
角度错误修复
现在,您可以看到此错误已删除。
角度错误修复

在浏览器中调试代码

Angular Augury工具

在Google chrome中搜索Angular Augury。
角度错误修复
单击"添加到镶边"按钮可在Chrome上添加此工具。
角度错误修复
将其添加到chrome后,打开浏览器的开发人员工具并打开Augury。
Angular Error Fixing
Augury是一个很棒的工具,用于分析Angular应用程序。打开Augury并重新加载浏览器页面。您将看到如下页面:
这是注入器图:
角度错误修复
这是路由器树:
角度错误修复
这是ngModule:
角度错误修复
昵称: 邮箱:
Copyright © 2022 立地货 All Rights Reserved.
备案号:京ICP备14037608号-4