Porównaj ceny domen i usług IT, sprzedawców z całego świata

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');
}
}

Zaproszony:
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:

Kiedy piszesz komponent podrzędny w Angular 7, aktualizuje on jego zawartość po każdej zmianie danych wejściowych. W ten sposób możesz dodać wszystkie potrzebne obliczenia

hak
https://angular.io/guide/lifecycle-hooks
lifecycle
ngOnChanges
.
ngOnInit
wywoływane tylko raz.
Dodaj następujący kod do listy. item-view.component.ts
ngOnChanges() {
this.school = this.schoolObject;
}

Powodzenia!
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:

Myślę, że dzieje się to w następujący sposób: Otrzymujesz informacje o szkole o „schoolObject”. Ale to, co wiążesz swoje wartości z plikiem html, to właściwości obiektu „szkoła”. W obecnej wersji twojego pliku ts widzę, że obiekt szkolny jest ustawiany tylko raz na ngOnInit (pomijając inicjalizację).
Myślę, że za każdym razem, gdy schoolObject otrzymuje nowe dane wejściowe, musisz ustawić obiekt school.
Wtedy będzie dobrze działać. Oto, co możesz zrobić:
schoolObject: School;
@Input()
set SchoolObject(schoolObj){
this.schoolObject = schoolObj;
this.school = schoolObj;
}

Będziesz musiał zaktualizować kod HTML, aby uzyskać wartości za pomocą SchoolObject na swoim rodzicu, takie jak:
<app-list-item-view *ngIf="showViewScreen" [SchoolObject]="selectedSchool" (notifyParentOnUpdate)='onViewItem($event)'></app-list-item-view>

Aby odpowiedzieć na pytania, Zaloguj się lub Zarejestruj się