Question

我使用Angular表单更新数据，但是即使后端中的update方法运行良好，submit按钮也不起作用，并且数据也无法更新。我在做什么错了？

这是我的角度分量 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函数的projectService：

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 中初始化您的import Search from '...' describle(Search, () => { it('trigger button', () => { const wrapper = shallowMount(Search) const clickMethodStub = jest.fn() wrapper.setMethods({ searchItem: clickMethodStub }) wrapper.find('#searchBtn').trigger('click') expect(clickMethodStub.mock.calls.length).toBe(1) }) }) }对象。像这样：

project

单击角形表单提交按钮后无法使用

1 个答案: