Html 如何将用户信息填充到编辑表单中
我有一个应用程序,您可以将学生的名字和姓氏数据导入其中,并将其写入mongodb。我可以创建新学生,也可以查看数据库中的学生列表,但在更新时,我似乎无法将学生数据填充到firstname和lastname输入字段中。 在我的list-students-component.ts中,我可以选择update,它将转发到(新的学生组件)以根据学生ID编辑学生。 我似乎不知道如何填充这些数据Html 如何将用户信息填充到编辑表单中,html,angular,crud,Html,Angular,Crud,我有一个应用程序,您可以将学生的名字和姓氏数据导入其中,并将其写入mongodb。我可以创建新学生,也可以查看数据库中的学生列表,但在更新时,我似乎无法将学生数据填充到firstname和lastname输入字段中。 在我的list-students-component.ts中,我可以选择update,它将转发到(新的学生组件)以根据学生ID编辑学生。 我似乎不知道如何填充这些数据 <div> <ul *ngFor ="let student of students let
<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>
为什么要使用更新按钮的
ng单击属性?我不记得这在Angular中是真实存在的。我在测试一个传递数据的方法时把它放在了那里,但它不起作用。其他注意事项:组件中的表单变量名应该是myForm
,而不是ngForm
。适用于编辑模式的ngOnInit
中的代码不清楚(this.ngForm.value;
-这是干什么用的?this.\u myService.updateStudent
做什么?应该如何填写NewStudentFormComponent
中的输入?)
<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);
});
}
}