如何将对象(数组)从子组件更新到父组件？

Question

因此，我有两个组件: array component (子组件)和contact-manager-component(父组件)，当我按update按钮时，如何使用输出和事件发射器将我的对象数组从一个子组件传递给父组件？此外，每当我单击父组件上的“编辑”按钮时，是否有一种方法将“创建”按钮更改为“更新”按钮？

​

​

子组件

​

import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import { MyContact } from '../models/myContact';
import { ContactService } from '../services/contact.service';

@Component({
  selector: 'app-add-contact',
  templateUrl: './add-contact.component.html',
  styleUrls: ['./add-contact.component.css']
})

export class AddContactComponent implements OnInit {
  public loading:boolean = false;
  @Input() contact:MyContact = {} as MyContact;
  @Output() contactChange:EventEmitter<MyContact> =new EventEmitter<MyContact>();

 
  public editMode:boolean = false;
  

  constructor(private contService:ContactService, private router:Router) { }

  ngOnInit(): void {}
   
  onSubmit(contactForm: { value: any; }) {
    this.contService.CreateContacts(this.contact).subscribe((data:MyContact)=>{
      this.router.navigate(['/']).then(()=>{
        window.location.reload();
      });       
 
  }
  
  update() {
  this.contactChange.emit(this.contact);
 }


 
}

<div class="container">
    <div class="row">
        <div class="col-sm-4">
            <form (ngSubmit)="onSubmit(contactForm)" #contactForm="ngForm" novalidate #contactChange>
                <div class="mb-2">
                    <input required [(ngModel)]="contact.name" name="name" type="text" class="form-control" placeholder="Name (required)" #name="ngModel" spellcheck="false">
                </div>
                <div *ngIf="!name?.valid && (name?.dirty || name?.touched)">Name Required</div>
                <div class="mb-2">
                    <input required email [(ngModel)]="contact.email" name="email" type="email" class="form-control" placeholder="Email (required)" #email="ngModel" spellcheck="false">
                </div>
                <div *ngIf="!email?.valid && (email?.dirty || email?.touched)">Email Not Valid</div>
                <div class="mb-2">
                    <input required [(ngModel)]="contact.mobile" name="mobile" type="number" class="form-control" placeholder="Mobile (required)" #mobile="ngModel" spellcheck="false">
                </div>
                <div *ngIf="!mobile?.valid && (mobile?.dirty || mobile?.touched)">Mobile Required</div>
                <div class="mb-2">
                    <input [(ngModel)]="contact.company" name="company" type="text" class="form-control" placeholder="Company (optional)" spellcheck="false">
                </div>
                <div class="mb-2">
                    <input [(ngModel)]="contact.title" name="title" type="text" class="form-control" placeholder="Title (optional)" spellcheck="false">
                </div>
                <div class="mb-2">
                    <input [(ngModel)]="contact.photo" name="photo" type="text" class="form-control" placeholder="Photo Url (optional)" spellcheck="false">
                </div>
                <div class="mb-2">
                    <button type="submit" class="btn btn-success" [disabled]="!contactForm.valid">Create</button>
                </div>
                <div class="mb-2">
                    <button (click)="update()" class="btn btn-primary" >Update</button>
                </div>
            </form>
        </div>
    </div>
</div>

​

父组件

​

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { MyContact } from '../models/myContact';
import { ContactService } from '../services/contact.service';

@Component({
  selector: 'app-contact-manager',
  templateUrl: './contact-manager.component.html',
  styleUrls: ['./contact-manager.component.css']
})
export class ContactManagerComponent implements OnInit {
  public loading:boolean = false;
  public contacts:MyContact[] = [];
  public contactId:string | null = null;

  selectedContact:MyContact = new MyContact();

  constructor(private contService:ContactService, private router:Router, private activatedRoute:ActivatedRoute) { }

  ngOnInit(): void {
    this.getAllContactData(); 
  }

  getAllContactData(){
    this.loading = true;
    this.contService.getAllContacts().subscribe((data:MyContact[])=>{
      this.contacts = data;
      this.loading = false;
    })
  }
  deleteContact(contactId:string | undefined){
    if(contactId){
      this.contService.deleteContacts(contactId).subscribe((data:{})=>{
        this.getAllContactData();        
      });
    }
  }

 showDetails(contact:MyContact) {
  this.selectedContact=Object.assign({},contact)
  this.isupdate = true;
  console.log(this.isupdate);
  console.log(this.selectedContact);
}

update(contact: MyContact) {
*INSERT FUNCTION HERE FOR contact to be send to the array object MyContact in parent component*
}

}

<app-add-contact [contact]="selectedContact" (contactChange)="update($event)" *ngIf="visible "></app-add-contact>

<div class="container mt-3">
   
    <h2>Contact List</h2>
     
    <table class="table table-bordered border-secondary border-5 table-light table-hover">
      <thead class="table table-bordered table-dark">
          <tr>
            <th>#</th>
            <th>Id</th>
            <th>Name</th>
            <th>Email</th>
            <th>Contact</th>
            <th>Action</th>
          </tr>
      </thead>
      <tbody>
        <tr *ngFor="let contact of contacts ; let i = index">
          <td>{{ i + 1 }}</td>
          <td>{{ contact.id }}</td>
          <td>{{ contact.name }}</td>
          <td>{{ contact.email }}</td>
          <td>{{ contact.mobile }}</td>
          <td><div class="d-flex align-items- justify-content-around">
            <a routerLink="/contacts/view/{{contact.id}}" class="btn btn-warning my-1" data-toggle="tooltip" data-placement="top" title="View Contact Details">
                <i class="fa fa-eye"></i>
            </a>
            <button class="btn btn-primary my-1" data-toggle="tooltip" data-placement="top" title="Edit Contact" (click)="showDetails(contact)">Edit</button>
            <a routerLink="/contacts/edit/{{contact.id}}" class="btn btn-primary my-1" data-toggle="tooltip" data-placement="top" title="Edit Contact">
                <i class="fa fa-pen"></i>
            </a>
            <button class="btn btn-danger my-1" data-toggle="tooltip" data-placement="top" title="Delete Contact" (click)="deleteContact(contact.id)">
                <i class="fa fa-trash"></i>
            </button>
        </div></td>
        </tr>
      </tbody>
    </table>
  </div>

​

我已经在这个问题上被困了几天了。

试着遵循本教程还是没有用。一直有错误和数据没有反映出来。角@input，@output & EventEmitter

Answer 1

您缺少将子组件中的output处理到父组件中。

在父模板HTML中，您可能有子组件，并且正在传递contact @Input。

<app-add-contact [contact]="theContactYouWanToPass"></app-add-contact>

由于您的子组件在更新联系人时发出事件，因此需要在父组件中指定该事件，以便它可以侦听该特定事件：

<app-add-contact 
  [contact]="theContactYouWanToPass"
  (contactChange)="update($event)">
</app-add-contact>

该事件的名称必须与您的子组件中声明的名称相同。

我已经在这个问题上被困了几天了。

我建议阅读文档的官方网站。