Angular 7错误修复 - 芒果文档

📌 相关文章

📜 Angular 7错误修复

📅 最后修改于: 2020-12-16 09:56:41 🧑 作者: Mango

角度误差修复

由于多种原因，您可能会在Angular中出现错误。

让我们以一个示例来看一些特定类型的错误。

我们创建了一个名为“ testing-app”的应用。在这个应用程序中，我们在页面上有一个服务器和一个按钮，可以创建其他服务器。

在这里，“ component.html ”文件包含以下代码：


  
 
   My Servers
   
 



 
   {{ server }}

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

输出：