Question

我试图从父组件中获取值，并在提交时将其传递给子组件，然后将其显示在子组件中。但是，该对象不会从onSubmit函数内部传递。因此，该子项不会显示任何新插入的值。

父ts文件：

@Output() StudentAdded= new EventEmitter<Stud>();

onSubmit(){
   const firstname=this.fname.value;
   const lastname=this.lname.value;
   const date=this.dob.value;
   const newStud = new Stud(firstname,lastname,date);
   this.StudentAdded.emit(newStud);
}

父html：

<div class="col-xs 5">
    <app-stud-details [student]="newStudent"  (StudentAdded)="studAdded($event)"></app-stud-details>
</div>

在儿童中：

export class StudDetailsComponent implements OnInit { 
  @Input() student: Stud;
  students: Stud[]=[new Stud('Test','Test','05-11-1922')];

  constructor() { }

  ngOnInit() {
  }
  studAdded(student: Stud){
    this.students.push(student);
  }
}

子html：

 <div class="col-xs-4" *ngFor="let student of students">
    {{'Name:'}}{{student.firstname}}{{' '+ student.lastname}}<br>
    {{'Date of Birth:'}}{{student.dob}}
  </div>

Answer 1

当您将newStudent作为@Input()传递给孩子时，请检测其变化并将变化后的新学生传递给students数组

Parent.ts

onSubmit(){
   const firstname=this.fname.value;
   const lastname=this.lname.value;
   const date=this.dob.value;
   const newStud = new Stud(firstname,lastname,date);
   this.newStudent = newStud 
}

Child.ts：

 ngOnChanges(changes: SimpleChanges) {
    const studChange = changes.student;

    if (studChange != undefined && studChange .previousValue != studChange .currentValue) {
      this.students.push(studChange.currentValue)
    }
  }

请注意，@Output()是在子组件中定义的，用于将事件传递给父组件

Answer 2

如果要从父组件中获取值到子组件，则必须使用 input 来完成

但是您可以通过输出

将孩子的数据发送给父母

输入用于接收数据，而输出用于发送数据

您可以使用以下代码发送数据

student.ts：

export class Student {
constructor(FirstName, LastName) {
    this.FirstName = FirstName;
    this.LastName = LastName;
}

Student.Component.ts：

FirstName: string;
LastName: string;
}

firstname: any;
lastname: any;
students: Array<Student> = [];

onSubmit() {
  debugger
  const firstname = this.firstname;
  const lastname = this.lastname;
  const newStud = new Student(firstname, lastname);
  this.students.push(newStud);
}

Student.Component.html：

<label>first name:
    <input [(ngModel)]="firstname" placeholder="first name"/>
</label>

<label>last name:
     <input [(ngModel)]="lastname" placeholder="last name"/>
</label>

<button (click)="onSubmit()">clear</button>

<app-student-details [ListStudent]="students"></app-student-details>

StudentDetails.Component.html：

<div class="col-xs-4" *ngFor="let student of ListStudent">
  {{'Name:'}}{{student.FirstName}}{{' '+ student.LastName}}<br>
</div>

StudentDetails.Component.ts：

@Input() ListStudent: Student;

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { ExampleNg6LibComponent } from 'example-ng6-lib';
import { FooComponent } from 'projects/example-ng6-lib/src/lib/foo/foo.component';
import { StudentComponent } from './student/student.component';
import { StudentDetailsComponent } from './student/student-details/student- 
details.component';

@NgModule({
    declarations: [
    AppComponent,
    StudentComponent,
    StudentDetailsComponent
  ],
    imports: [
      BrowserModule,
      FormsModule
      ],
    providers: [],
    bootstrap: [AppComponent]
 })
export class AppModule { }

在提交

2 个答案: