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

app-component.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() {
  }

}

cockpit.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>

I am trying to use event emitter to emit an event from child to parent component and display it using ngFor. The emitter doesn't work. I am trying to emit event from Cockpit component to App-component and display few data using ngFor.

Answer 1

I think you are watching the Angular 7- The Complete Guide Created by Maximilian Schwarzmüller on Udemy. It's really good and detailed course. Just compare your code with the one who the instructor has made.

The code you pasted here doesn't compile even!! so we cant give ua detailed solution. just some general solution is listed below:

In app-component.ts some parts are missing.Also make sure you followed camel case or pascal case in all methods and properties names.

Answer 2

The reason why you don't see anything from ngFor is that in cockpit you emit an object with these properties:

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

Servername and ServerContent. But in the receiving side you try to push it like this:

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

Try changing this line to this:

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

Check this stackblitz for working version.