angular 7错误修复 angular7错误修复|Angular7教程

本文概述

在浏览器中调试代码

由于多种原因，你可能会在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= [];

更改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); } }

输出：