Angular 错误修复

17 Mar 2025 | 阅读 2 分钟

在 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);
  }
}

输出