将值传递给子组件 Angular 7

我经过
[/url]
并意识到在声明与这些相关的输入属性后 Angular 必须自动更新输入值。 在我创建的组件中，它看起来不那样。

当我单击父级网格中的元素时，它会正确显示详细信息。 当我点击另一个项目后，它不会更新子组件。 我设置 console.log 监视所选条目。 根据用户的选择，它不断变化。

你可以看看并帮助我了解问题是什么？

lists.component.html [父母]

<div class="container-fluid">

<div class="row mt-2 mb-2">

<div class="col-8">

<app-list-item-add $event="" '="" *ngif="showAddnewScreen" ='onadditem="" notifyparentonupdate=""></app-list-item-add>

<app-list-item-view $event="" '="" *ngif="showViewScreen" ='onviewitem="" [studentobject]="selectedstudent" notifyparentonupdate=""></app-list-item-view>

</div>

</div>

</div>

lists.component.ts [父母]

import { Component, OnInit, ViewChild } from '@angular/core';

import { studentsService, student } from '../services/students.service';

import { Router, ActivatedRoute } from '@angular/router';

import { GridComponent, ToolbarItems, SortEventArgs, RowSelectEventArgs, SelectionSettingsModel } from '@syncfusion/ej2-ng-grids';

import { ClickEventArgs } from '@syncfusion/ej2-ng-navigations';

import * as moment from 'moment';

import { Internationalization } from '@syncfusion/ej2-base';



@Component/{

 selector: 'app-lists',

 templateUrl: './lists.component.html',

 styleUrls: ['./lists.component.scss']

}/

export class ListsComponent implements OnInit {



 constructor/public router: Router, private route: ActivatedRoute, private studentsService: studentsService/ { }

 selectedstudent: student = null;

 students: student[] = new Array<student>//;

 intl: Internationalization = new Internationalization//;

 showAddnewScreen = false;

 showViewScreen = false;



 // Syncfusion GRID settings for the students grid.

 // Documentation: [url=https://ej2.syncfusion.com/16.1.32/angular/documentation/grid/getting-started.html]https://ej2.syncfusion.com/16. ... .html[/url]

 studentsGridId = 'studentsGrid';

 @ViewChild/'studentsGrid'/

 studentsGrid: GridComponent;

 toolbar: ToolbarItems[];



 // [url=https://ej2.syncfusion.com/16.1.32/angular/documentation/grid/api-filterSettings.html]https://ej2.syncfusion.com/16. ... .html[/url]

 studentsFilteringSettings = {

 };



 // [url=https://ej2.syncfusion.com/16.1.32/angular/documentation/grid/api-pageSettings.html]https://ej2.syncfusion.com/16. ... .html[/url]

 studentsPageSettings = {

 currentPage: 1,

 enableQueryString: true,

 pageSizes: [10, 25, 50, 100],

 pageSize: 10

 };



 // [url=https://ej2.syncfusion.com/16.1.32/angular/documentation/grid/api-selectionSettings.html]https://ej2.syncfusion.com/16. ... .html[/url]

 studentsSelectionOptions: SelectionSettingsModel;



 studentsToolbarClick/args: ClickEventArgs/ {

 // handles multiple grids on the page by prepending the Grid ID to the _eventname

 // E.g.

 // if /args.item.id == studentsGrid_excelexport/....

 if /args.item.id === /this.studentsGridId + '_excelexport'// {

 this.studentsGrid.excelExport//;

 }

 if /args.item.id === /this.studentsGridId + '_pdfexport'// {

 this.studentsGrid.pdfExport//;

 }

 }



 studentsRowSelected/args: RowSelectEventArgs/ {

 const selectedrowindex: number[] = this.studentsGrid.getSelectedRowIndexes//; // Get the selected row indexes.

 console.log/selectedrowindex/;

 const selectedRecords: student[] = this.studentsGrid.getSelectedRecords// as student[]; // Get the selected records.

 const selectedRecord = selectedRecords[0];

 if /selectedRecord/ {

 }

 }



 gridActionHandler/args: SortEventArgs/ {

 console.log/args.requestType + ' ' + args.type/;

 }



 ngOnInit// {

 this.toolbar = ['Print', 'Search', 'ExcelExport', 'PdfExport'];

 this.studentsSelectionOptions = {

 type: 'Single',

 mode: 'Row'

 };



 this.studentsService.getstudents/1000/.subscribe//students/ =&gt; {

 this.students = students;

 this.students.sort/this.sortBystudentNumber/;

 this.studentsGrid.dataSource = this.students;

 }/;



 // Listen for changes to list items

 this.studentsService.studentAdded$.subscribe/student =&gt; {

 // convert the students date strings into dates

 student.createdOn = moment/student.createdOn/.toDate//;

 student.modifiedOn = moment/student.modifiedOn/.toDate//;

 // Add the new student to the list

 this.students.push/student/;

 // resort the grid data

 this.students.sort/this.sortBystudentNumber/;

 // refresh the grid

 this.studentsGrid.refresh//;

 }/;

 this.studentsService.studentChanged$.subscribe/student =&gt; {

 // convert the students date strings into dates

 student.createdOn = moment/student.createdOn/.toDate//;

 student.modifiedOn = moment/student.modifiedOn/.toDate//;

 // Update the student in the list.

 this.students.splice/this.students.findIndex/s =&gt; s.id === student.id/, 1, student/;

 // resort the grid data

 this.students.sort/this.sortBystudentNumber/;

 // refresh the grid

 this.studentsGrid.refresh//;

 }/;

 this.studentsService.studentDeleted$.subscribe/id =&gt; {

 // Remove the student from the list

 this.students.splice/this.students.findIndex/s =&gt; s.id === id/, 1/;

 // resort the grid data

 this.students.sort/this.sortBystudentNumber/;

 // refresh the grid

 this.studentsGrid.refresh//;

 }/;



 }



 addNew// {

 this.showAddnewScreen = true;

 this.showViewScreen = false;

 }



 viewstudent/data: student/ {

 console.log/data/;

 this.selectedstudent = data;

 this.showViewScreen = true;

 this.showAddnewScreen = false;

 }



 onAddItem/student: student/: void {

 this.showAddnewScreen = false;

 }



 onViewItem/command: string/ {

 this.showViewScreen = false;



 if /command === 'cancel'/ {

 } else if /command === 'save'/ {

 } else if /command === 'delete'/ {

 }

 }



 sortBystudentNumber = /s1, s2/ =&gt; s1.studentNumber - s2.studentNumber;

}

list-check-view.component.html [baby]

<div class="row">

<div class="col-12">

<section class="studentDetails">

<app-section-title heading="student Details" level="4"></app-section-title>

<form #studentform="ngForm" class="pt-2">

<div class="row">

<div class="col-10">

<div class="form-group">

<div class="row">

<div class="col-4">

<span>student number</span>

</div>

<div class="col-6">

<input [="" ]="student.studentNumber" aria-label="student number" class="form-control" name="student Number" ngmodel="" type="text"/>

</div>

</div>

</div>

<div class="form-group">

<div class="row">

<div class="col-4">

<span>student name</span>

</div>

<div class="col-6">

<input [="" ]="student.studentName" aria-label="student name" class="form-control" name="student Name" ngmodel="" type="text"/>

</div>

</div>

</div>

<div class="form-group">

<div class="row">

<div class="col-4">

<span>student description</span>

</div>

<div class="col-6">

<input [="" ]="student.description" aria-label="student description" class="form-control" name="Description" ngmodel="" type="text"/>

</div>

</div>

</div>

<div class="form-group">

<div class="row">

<div class="col-4">

<span>Created date</span>

</div>

<div class="col-6">

<ejs-datepicker [="" [readonly]="true" ]="student.createdOn" aria-label="Created date" format="dd-MM-yyyyy" name="Created On" ngmodel="" placeholder="Enter date"></ejs-datepicker>

<label class="col-8 col-lg-9 col-form-label">/{{student.createdOn | timeago}}/</label>

</div>

</div>

</div>

<div class="form-group">

<div class="row">

<div class="col-4">

<span>Created by</span>

</div>

<div class="col-6">

<input [="" [readonly]="true" ]="student.createdBy" aria-label="Created by" class="form-control" name="Created By" ngmodel="" type="text"/>

</div>

</div>

</div>

<div class="form-group">

<div class="row">

<div class="col-4">

<span>Modified date</span>

</div>

<div class="col-6">

<ejs-datepicker [="" ]="student.modifiedOn" aria-label="Modified date" format="dd-MM-yyyyy" name="Modified On" ngmodel="" placeholder="Enter date"></ejs-datepicker>

<label *ngif="student.modifiedOn" class="col-8 col-lg-9 col-form-label">/{{student.modifiedOn | timeago}}/</label>

</div>

</div>

</div>

<div class="form-group">

<div class="row">

<div class="col-4">

<span>Modified by</span>

</div>

<div class="col-6">

<input [="" ]="student.modifiedBy" aria-label="Modified by" class="form-control" name="Modified By" ngmodel="" type="text"/>

</div>

</div>

</div>

</div>

</div>

</form>

</section>

</div>

</div>

列表 - check-view.component.ts [child]

import { Component, OnInit, ViewChild, EventEmitter, Output, Input } from '@angular/core';

import { studentsService, student } from '../services/students.service';

import { ActivatedRoute } from '@angular/router';

import { DatePicker } from '@syncfusion/ej2-calendars';

import * as moment from 'moment';

import { NgForm } from '@angular/forms';



@Component/{

 selector: 'app-list-item-view',

 templateUrl: './list-item-view.component.html',

 styleUrls: ['./list-item-view.component.scss']

}/



export class ListItemViewComponent implements OnInit {

 @Output// notifyParentOnUpdate: EventEmitter<any> = new EventEmitter<any>//;

 @Input// studentObject: student;



 studentNumber: number;



 constructor/private route: ActivatedRoute, private studentsService: studentsService/ { }



 @ViewChild/NgForm/ studentForm: NgForm;



 public student = new student//;



 ngOnInit// {

 this.student = this.studentObject;

 }



 save// {

 this.studentsService.updatestudent/this.student/.subscribe/newstudent =&gt; {

 this.notifyParentOnUpdate.emit/'save'/;

 }/;



 }



 delete// {

 this.studentsService.deletestudent/this.student.id/.subscribe/newstudent =&gt; {

 this.notifyParentOnUpdate.emit/'delete'/;

 }/;

 }



 editOnBlur// {

 this.notifyParentOnUpdate.emit/'editOnBlur'/;

 }



 cancel// {

 this.notifyParentOnUpdate.emit/'cancel'/;

 }

}

</any></any></student>