Angular 当我点击表单提交按钮时它不起作用

Question

我使用 Angular 表单来更新数据，但是提交按钮不起作用，即使后端的更新方法运行良好，数据也没有得到更新。我做错了什么？

这是我的 angular 组件 HTML :

<form (ngSubmit)="onSubmit()">
  <div>
    <label for="title">
      Title
    </label>
    <input id="title" type="text" [(ngModel)]="project.title" name="title">
  </div>

  <div>
    <label for="description">
      Description
    </label>
    <input id="description" type="text" [(ngModel)]="project.description" name="description">
  </div>

  <button class="button" type="submit">Save</button>
</form>

打字稿：

import {Component, OnInit} from '@angular/core';
import {ProjectService} from "../project.service";
import {Project} from "../project";
import {Subscription} from "rxjs";
import {ActivatedRoute, Router} from "@angular/router";
@Component({
  selector: 'app-project-edit',
  templateUrl: './project-edit.component.html',
  styleUrls: ['./project-edit.component.css']
})
export class ProjectEditComponent implements OnInit {
project: Project;
private sub : Subscription;
constructor(
          private projectService: ProjectService,
          private route: ActivatedRoute,
          private router: Router
) {

}

ngOnInit() {
this.sub = this.route.params.subscribe(params => {
  let id = +params['id'];
  this.projectService.getProject(id)
    .then(project => this.project = project);
});
}

onSubmit() {
  this.updateProject();
}

updateProject() {
 this.projectService.updateProject(this.project.id, this.project)
  .then(pr => this.project = new Project())
  }

}

这是具有 updateProject 功能的项目服务：

import {Injectable} from "@angular/core";
import {Project} from "./project";

import {HttpClient} from '@angular/common/http';

@Injectable()
export class ProjectService {
  private baseUrl = 'http://localhost:8080';

  constructor(private  http: HttpClient) {
  }

  getProjects(): Promise<Project[]> {
    return this.http.get(this.baseUrl + '/api/project/')
      .toPromise()
      .then(response => response as Project[])
      .catch(this.handleError);
  }

  getProject(id: number): Promise<Project> {
    return this.http.get(this.baseUrl + '/api/project/' + id)
      .toPromise()
      .then(response => response as Project)
      .catch(this.handleError);
  }

  createProject(project: Project) {

    return this.http.post(this.baseUrl + '/api/projects', project);

  }

  updateProject(id: number, newProjectData: Project): Promise<Project> {
    return this.http.put(this.baseUrl+'/api/projects' + id,newProjectData)
      .toPromise()
      .then(response => response as Project)
      .catch(this.handleError);
  }

  deleteProject(id: number) {

    return this.http.delete(this.baseUrl+'/api/projects' + id);

  }

  private handleError(error: any): Promise<any> {
    console.error('Some error occured', error);
    return Promise.reject(error.message || error);
  }
}

Answer 1

在您的 ProjectEditComponent 中初始化您的 project 对象。像这样：

project: Project = {
    title: "",
    description: ""
};

Angular 当我点击表单提交按钮时它不起作用

Angular forms submit button doesn't work when I click on it

angular

angular-forms