У меня есть приложение, в которое вы можете импортировать данные об имени и фамилии ученика, и оно пишет в mongodb. Я могу создавать новых студентов и просматривать список студентов в БД, но при обновлении я не могу получить данные о студентах для заполнения в полях ввода имени и фамилии. В моем list-студентов-компонент.ts я могу выбрать обновление, и он будет перенаправлен (новый компонент-студент) для редактирования студентов на основе идентификатора студента. Я не могу понять, чтобы получить эти данные для заполнения
<div>
<ul *ngFor ="let student of students let i = index">
<li> {{student._id}}: {{student.firstName}} {{student.lastName}} (index {{i}})
<button mat-button color="warn" (click)="onDelete(student._id)">DELETE</button>
<button mat-button color="accent" [routerLink]="['/editStudent', student._id]">UPDATE</button>
</li>
</ul>
</div>
<div>
<h3>{{mode}} Student Form</h3>
<form (ngSubmit)="onSubmit()" #myForm="ngForm">
<mat-form-field >
<input matInput placeholder="First Name" id="firstname" [(ngModel)]=" firstName" name="firstname" >
</mat-form-field>
<mat-form-field >
<input matInput placeholder="Last Name" id="lastname" [(ngModel)]=" lastName" name="lastname" >
</mat-form-field>
<p>
<button type="submit" mat-raised-button color="primary">Submit</button>
</p>
</form>
</div>
import { Component, OnInit, Input } from '@angular/core';
import { StudentService } from '../student.service';
import { Router } from '@angular/router';
import { ActivatedRoute, ParamMap } from '@angular/router';
import { FormGroup, FormBuilder, FormControl } from '@angular/forms';
@Component({
selector: 'app-new-student-form',
templateUrl: './new-student-form.component.html',
styleUrls: ['./new-student-form.component.css']
})
export class NewStudentFormComponent implements OnInit {
@Input() firstName: string;
@Input() lastName: string;
private mode = 'Add New'; //default mode
private id: string; //student ID
public ngForm = new FormGroup({
firstName: new FormControl('firstName'),
lastName: new FormControl('lastName')
})
constructor(private _myService: StudentService, private router: Router,
public route: ActivatedRoute) { }
onSubmit() {
console.log("You submitted: " + this.firstName + " " + this.lastName);
this._myService.addStudents(this.firstName, this.lastName);
this.router.navigate(['/listStudents'])
.then(() => {
location.reload();
});
}
ngOnInit() {
this.route.paramMap.subscribe((paramMap: ParamMap) => {
if (paramMap.has('_id')) {
this.mode = 'edit'; /*request had a parameter _id */
this.id = paramMap.get('_id');
}
else {
this.mode = 'Add New';
this.id = null;
}
if (this.mode == 'Add New')
this._myService.addStudents(this.firstName, this.lastName);
if (this.mode == 'edit')
this.ngForm.value;
this._myService.updateStudent(this.id, this.firstName, this.lastName);
});
}
}