我正在尝试使用angular创建一个编辑表单,由于某种原因[ngModel]不断给我一个错误,尽管它读取值并显示它。对行为感到困惑(对角度和学习很新)
下面是我的代码:
1)HTML
<div class="col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3">
<div class="panel-heading">
{{title}}
</div>
<form #editProject = "ngForm" (ngSubmit)="onSubmit(f)">
<div class="form">
<div class="form-group">
<label for="projectName">Project Name</label>
<input id="p_Name" type="text" name="project_name" class="form-control"
placeholder="Project Name" [(ngModel)]= "project.projectName" [ngModelOptions]="{standalone: true}"/>
</div>
<div class="button">
<button class="btn btn-primary" (click)="updateProject()">Update</button>
</div>
</div>
</form>
</div>
2)TS文件:
import { Component, Input, OnInit, Output, EventEmitter } from '@angular/core';
import {Project} from '../../models/project';
import {ProjectService} from '../../services/project.service';
import { FormGroup, FormControl, FormBuilder, Validators, FormsModule, ReactiveFormsModule } from '@angular/forms';
import { ActivatedRoute, Router } from '@angular/router';
import 'rxjs/add/operator/map';
@Component({
selector: 'app-edit',
templateUrl: './edit.component.html',
styleUrls: ['./edit.component.css']
})
export class EditComponent implements OnInit {
public project: any;
public projectForm: FormGroup;
title = 'Edit Project';
editProject: Project;
isLoading = true;
isSaving = false;
i: any;
constructor(private route: ActivatedRoute, private router: Router, private projectService: ProjectService, private fb: FormBuilder) {
}
ngOnInit() {
console.log(this.route.params);
this.route.params.subscribe(params => {this.i = +params['id']; });
this.projectService.getProjectById(this.i)
//.map(responseData => {this.project = responseData;})
.subscribe(responseData => {
this.project = responseData;
console.log(this.project);
this.isLoading = false;
});
}
3)输出:
[显示结果“数据库”但也给出错误]