Question

cockpit.component.ts。。。 ...... 。 ...... 。。。 ...... 。。。 .... ......... ....... ........ 。 ...... .. ..... ...... 。 ...... 。 ...

import {Component, EventEmitter, OnInit, Output} from '@angular/core';

@Component({
  selector: 'app-cockpit',
  templateUrl: './cockpit.component.html',
  styleUrls: ['./cockpit.component.css']
})
export class CockpitComponent implements OnInit {
  @Output() serverCreated = new EventEmitter<{serverName: string, serverContent: string}>();
  @Output() blueprintCreated = new EventEmitter<{serverName: string, serverContent: string}>();
  newServerName = '';
  newServerContent = '';
  constructor() { }

  ngOnInit() {
  }
  onAddServer() {
    this.serverCreated.emit(
      {serverName: this.newServerName,
        serverContent: this.newServerContent
      });
  }

  onAddBlueprint() {
    this.blueprintCreated.emit(
      {serverName: this.newServerName,
        serverContent: this.newServerContent
      });
  }
}

任何人都可以解释为什么我会收到以下错误？我是角色的初学者。

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  serverElements = [{
    type: 'server',
    name: 'Testserver',
    content: 'Just a Test!!'
  }];


  onServerAdded(serverData: {serverName: string, serverContent: string}) {
    this.serverElements.push({
      type: 'server',
      name: serverData.serverName,
      content: serverData.serverContent
    });
  }

  onBlueprintAdded(blueprintData: {serverName: string, serverContent: string}) {
    this.serverElements.push({
      type: 'blueprint',
      name: blueprintData.serverName,
      content: blueprintData.serverContent
    });
  }
}

<div class="container">
  <app-cockpit
    (serverCreated)="onServerAdded($event)"
    (blueprintCreated)="onBlueprintAdded($event)"
  ></app-cockpit>
  <hr>
  <div class="row">
    <div class="col-xs-12">
     <app-server-element
       *ngFor="let serverElement of serverElements"
       [element]="serverElement"
     ></app-server-element>
    </div>
  </div>
</div>

控制台出错：

AppComponent.html:2 ERROR TypeError: _co.onBlueprintAdded is not a function
    at Object.eval [as handleEvent] (AppComponent.html:4)
    at handleEvent (core.es5.js:12023)
    at callWithDebugContext (core.es5.js:13493)
    at Object.debugHandleEvent [as handleEvent] (core.es5.js:13081)
    at dispatchEvent (core.es5.js:8615)
    at core.es5.js:10783
    at SafeSubscriber.schedulerFn [as _next] (core.es5.js:3647)
    at SafeSubscriber.__tryOrUnsub (Subscriber.js:238)
    at SafeSubscriber.next (Subscriber.js:185)
    at Subscriber._next (Subscriber.js:125)

在我发布问题之前，还需要写一些东西

Answer 1

再次重新运行ng服务，它将成为新的Bundle

Answer 2

cockpit.component.ts中需要的声明是

serverElement=[];

更改app.component.ts中的函数名称

onServerAdded to onAddServer
onBlueprintAdded to onAddBluePrint

app.component.html中的更改

(serverCreated)="onAddServer($event)"
(blueprintCreated)="onAddBluePrint($event)"

希望您的cockpit.component.ts如下所示

input type =“ text” [（ngModel）] =“ newServerName”>
输入type =“ text” [（ngModel）] =“ newServerContent”>
按钮（click）=“ onAddServer（）”>添加服务器
按钮（click）=“ onAddBluePrint（）”>添加蓝图

Answer 3

在复制类详细信息时，可能将属性和方法粘贴到错误的文件上，例如粘贴在app-routing.module.ts而不是Angular寻找功能的app.component.ts上。

错误TypeError：_co.onBlueprintAdded不是函数

3 个答案: