Przekazywanie wartości do komponentu podrzędnego Angular 7

Przeszedłem

to jest
https://angular.io/guide/compo ... etter
i zdał sobie sprawę, że po zadeklarowaniu właściwości wejściowej powiązanej z danymi, Angular powinien automatycznie zaktualizować wartość wejściową. W komponencie, który stworzyłem, tak nie wygląda.
Kiedy klikam element w siatce na rodzicu, wyświetla mi się poprawnie szczegóły. Kiedy klikam później na inny element, nie aktualizuje to komponentu podrzędnego. Umieściłem console.log do monitorowania wybranego wpisu. Ciągle się zmienia zgodnie z wyborem użytkownika.
Czy mógłbyś rzucić okiem i pomóc mi zrozumieć, na czym polega problem?
list.component.html [nadrzędny]

<div class="container-fluid">

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

 <div class="col-8">

 <app-list-item-add *ngIf="showAddnewScreen" (notifyParentOnUpdate)='onAddItem($event)'></app-list-item-add>

 <app-list-item-view *ngIf="showViewScreen" [studentObject]="selectedstudent" (notifyParentOnUpdate)='onViewItem($event)'></app-list-item-view>

 

 

list.component.ts [element nadrzędny]

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) => {

 this.students = students;

 this.students.sort(this.sortBystudentNumber);

 this.studentsGrid.dataSource = this.students;

 });// Listen for changes to list items

 this.studentsService.studentAdded$.subscribe(student => {

// 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 => {

// 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 => 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 => {

// Remove the student from the list

 this.students.splice(this.students.findIndex(s => 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) => s1.studentNumber - s2.studentNumber;

}

list-item-view.component.html [child]

<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 class="col-6">

 <input type="text" class="form-control" aria-label="student number"

 [(ngModel)]="student.studentNumber" name="student Number"/>

 

 

  <div class="form-group">

 <div class="row">

 <div class="col-4">

 <span>student name</span>

 

 <div class="col-6">

 <input type="text" class="form-control" aria-label="student name"

 [(ngModel)]="student.studentName" name="student Name"/>

 

 

  <div class="form-group">

 <div class="row">

 <div class="col-4">

 <span>student description</span>

 

 <div class="col-6">

 <input type="text" class="form-control" aria-label="student description"

 [(ngModel)]="student.description" name="Description"/>

 

 

  <div class="form-group">

 <div class="row">

 <div class="col-4">

 <span>Created date</span>

 

 <div class="col-6"> 

 <ejs-datepicker placeholder='Enter date' format="dd-MM-yyyyy" aria-label="Created date" [readonly]="true"

 [(ngModel)]="student.createdOn" name="Created On"></ejs-datepicker>

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

 

 

  <div class="form-group">

 <div class="row">

 <div class="col-4">

 <span>Created by</span>

 

 <div class="col-6">

 <input type="text" class="form-control" aria-label="Created by" [readonly]="true"

 [(ngModel)]="student.createdBy" name="Created By"/>

 

 

  <div class="form-group">

 <div class="row">

 <div class="col-4">

 <span>Modified date</span>

 

 <div class="col-6">

 <ejs-datepicker placeholder='Enter date' format="dd-MM-yyyyy" aria-label="Modified date"

 [(ngModel)]="student.modifiedOn" name="Modified On"></ejs-datepicker>

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

 

 

  <div class="form-group">

 <div class="row">

 <div class="col-4">

 <span>Modified by</span>

 

 <div class="col-6">

 <input type="text" class="form-control" aria-label="Modified by"

 [(ngModel)]="student.modifiedBy" name="Modified By"/>

 

 

  

 

 </form>

 </section>

 

list-item-view.component.ts [dziecko]

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 => {

 this.notifyParentOnUpdate.emit('save');

 }); } delete() {

 this.studentsService.deletestudent(this.student.id).subscribe(newstudent => {

 this.notifyParentOnUpdate.emit('delete');

 });

 } editOnBlur() {

 this.notifyParentOnUpdate.emit('editOnBlur');

 } cancel() {

 this.notifyParentOnUpdate.emit('cancel');

 }

}