Eventemitter 不会将数据从子组件发送到父组件

Question

app-component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  test="";
  type:string;
  title=[{Sname:'Test',Scontent:'Test',Stype:'test'}];
  public OnServerAdded(Data:{name:string,content:string}) {
     this.type="Main";
     this.title.push({Sname:Data.name,Scontent:Data.content,Stype: this.type});
  }
}

应用组件.html

<app-cockpit (Servercreated)="OnServerAdded($event)"></app-cockpit>
<hr>
<p *ngFor="let a of title">
{{a.Sname}}
</p>

cockpit.component.ts

import { Component, OnInit,EventEmitter ,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() Bluecreated=new EventEmitter<{Servername:string,ServerContent:string}>();
 newServerName= "";
 newServerContent = "";
 Add="";
  constructor() { }
  public ServerAdded()
  {
  this.Servercreated.emit({Servername:this.newServerName,ServerContent:this.newServerContent});
  this.Add="add"
  }
  public BlueAdded()
  {
  this.Servercreated.emit({Servername:this.newServerName,ServerContent:this.newServerContent});
  }
  ngOnInit() {
  }

}

驾驶舱.component.html

<div class="container">
    <div class="row">
  <div class="col-md-12">

      <p>Add new Servers or BluePrint</p>

        <label>Server Name</label>
        <input type="text" class="form-control" [(ngModel)]="newServerName">
        <label>Server Content</label>
        <input type="text" class="form-control" [(ngModel)]="newServerContent">      
        <br>
        <button class="btn btn-primary" (click)="ServerAdded()" type="button">Add Server</button> &nbsp;
        <button class="btn btn-danger" (click)="BluePrintAdded()" type="button">Add Server</button> &nbsp;
        <p></p>
    </div>
  </div>
</div>

我正在尝试使用事件发射器从子组件到父组件发出事件并使用 ngFor 显示它。 发射器不工作。 我正在尝试从 Cockpit 组件向 App 组件发出事件并使用 ngFor 显示少量数据。

Answer 1

我认为您正在观看 Angular 7 - 由 Maximilian Schwarzmüller 在 Udemy 上创建的完整指南。 这真的是很好和详细的课程。 只需将您的代码与教师制作的代码进行比较。

您粘贴在这里的代码甚至无法编译！！ 所以我们无法给出详细的解决方案。 下面列出了一些通用的解决方案：

在 app-component.ts 中，某些部分丢失了。还要确保在所有方法和属性名称中都遵循驼峰式大小写或帕斯卡式大小写。

Answer 2

您看不到 ngFor 任何内容的原因是，在 cockpit 中，您发出了一个具有以下属性的对象：

  public ServerAdded() {
    this.Servercreated.emit({ 
      Servername: this.newServerName, 
      ServerContent: this.newServerContent 
    });
    this.Add = "add"
  }

服务器名称和服务器内容。 但是在接收方，您尝试像这样推动它：

this.title.push({Sname:Data.name,Scontent:Data.content,Stype: this.type});

尝试将此行更改为：

this.title.push({ Sname: Data.Servername, Scontent: Data.ServerContent, Stype: this.type });

检查此stackblitz以获取工作版本。