将值传递给子组件 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>
已邀请:

龙天

赞同来自:

当您编写子组件时 Angular 7, 它每次更改输入数据时都会更新其内容。 所以你可以添加所有必要的计算
https://angular.io/guide/lifecycle-hooks
生命周期
ngOnChanges

.
ngOnInit

只叫一次。

请将以下代码添加到列表中。 item-view.component.ts


ngOnChanges// {
this.school = this.schoolObject;
}


祝你好运!

郭文康

赞同来自:

我认为发生以下情况:你上学信息 'schoolObject'. 但是你将你的值绑定到文件的事实 html, - 这些是物体的属性 'school'. 在当前版本的TS文件中,我看到学校对象仅安装一次 ngOnInit /不包括初始化/.

我想你需要每次安装学校对象 schoolObject 得到一个新的入口。
然后他会很好地工作。 这就是你能做的:


schoolObject: School;
@Input//
set SchoolObject/schoolObj/{
this.schoolObject = schoolObj;
this.school = schoolObj;
}


您需要更新 html, 使用值使用 SchoolObject 在您的父母上:


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

要回复问题请先登录注册