Angular 在放置数据时两次发送相同的请求

Question

我正在尝试在 Angular 中创建一个 Web UI，以实现我所做的宁静服务。当我尝试从 Angular 发出 put 或 post 请求时，它会发送两次请求并将相同的数据添加到 RESTfull 服务两次。我已经包含了两个 XHR 请求的屏幕截图以及我用来将数据放到服务器上的代码。有没有人对为什么会发生这种情况有任何想法？谢谢

角度代码：

addOccupation(occupation: Occupation): Observable<any>{
    return this.http.put<{Response, Occupation}>(this.url + 'occupation/insert', occupation, { headers: { 'Content-Type': 'application/json'}})
  }

  addAddress(address: Address): Observable<any>{
    return this.http.put<{Response, Address}>(this.url + 'address/insert/', address, { headers: { 'Content-Type': 'application/json'}})
  }

  addPerson(person: Person): Observable<any>{
    return this.http.put<{Response, Person}>(this.url + 'person/insert/', person, { headers: {'Content-Type': 'application/json',}})
  }

新的通用 HTML 代码

<form [formGroup]="addUser" (ngSubmit)="onSubmit()">
  <h5 *ngIf="added">Your person was successfully added to the database!</h5>
  <h5 *ngIf="added==false && submitted">Your person was not added to the database!</h5>
  <mat-form-field>
    First Name:
    <input matInput type="text" formControlName="firstName">
    <div *ngIf="submitted && addUser.controls.firstName.errors" class="error">
      <div *ngIf="addUser.controls.firstName.errors.required">First Name is Required!</div>
    </div>
  </mat-form-field>
  <br>
  <mat-form-field>
    Middle Name:
    <input matInput type="text" formControlName="middleName">
    <div *ngIf="submitted && addUser.controls.middleName.errors" class="error">
      <div *ngIf="addUser.controls.middleName.errors.required">Middle Name is Required!</div>
    </div>
    </mat-form-field>
    <br>
  <mat-form-field>
     Last Name:
    <input matInput type="text" formControlName="lastName">
    <div *ngIf="submitted && addUser.controls.lastName.errors" class="error">
      <div *ngIf="addUser.controls.lastName.errors.required">Last Name is Required!</div>
    </div>
  </mat-form-field>
  <br>
  <mat-form-field>
    Home Phone:
   <input matInput type="text" formControlName="homePhone">
   <div *ngIf="submitted && addUser.controls.homePhone.errors" class="error">
     <div *ngIf="addUser.controls.homePhone.errors.required">Home Phone is Required!</div>
   </div>
 </mat-form-field>
 <br>
 <mat-form-field>
  Mobile Phone:
 <input matInput type="text" formControlName="mobilePhone">
 <div *ngIf="submitted && addUser.controls.mobilePhone.errors" class="error">
   <div *ngIf="addUser.controls.mobilePhone.errors.required">mobilePhone is Required!</div>
 </div>
</mat-form-field>
<br>
<mat-form-field>
  Work Phone:
 <input matInput type="text" formControlName="workPhone">
 <div *ngIf="submitted && addUser.controls.workPhone.errors" class="error">
   <div *ngIf="addUser.controls.workPhone.errors.required">Work Phone is Required!</div>
 </div>
</mat-form-field>
<br>
<mat-form-field>
  Home Email:
 <input matInput type="text" formControlName="homeEmail">
 <div *ngIf="submitted && addUser.controls.homeEmail.errors" class="error">
   <div *ngIf="addUser.controls.homeEmail.errors.required">Home Email is Required!</div>
 </div>
</mat-form-field>
<br>
<mat-form-field>
  Work Email:
 <input matInput type="text" formControlName="workEmail">
 <div *ngIf="submitted && addUser.controls.workEmail.errors" class="error">
   <div *ngIf="addUser.controls.workEmail.errors.required">Work Email is Required!</div>
 </div>
</mat-form-field>
<br>
<mat-form-field>
  Height (cm):
 <input matInput type="number" formControlName="height">
 <div *ngIf="submitted && addUser.controls.height.errors" class="error">
   <div *ngIf="addUser.controls.height.errors.required">Height is Required!</div>
 </div>
</mat-form-field>
<br>
<mat-form-field>
  Weight (lbs):
 <input matInput type="number" formControlName="weight">
 <div *ngIf="submitted && addUser.controls.weight.errors" class="error">
   <div *ngIf="addUser.controls.weight.errors.required">Weight is Required!</div>
 </div>
</mat-form-field>
<br>
<mat-form-field>
  Gender:
 <input matInput type="text" formControlName="gender">
 <div *ngIf="submitted && addUser.controls.gender.errors" class="error">
   <div *ngIf="addUser.controls.gender.errors.required">Gender is Required!</div>
 </div>
</mat-form-field>
<br>
<mat-form-field>
  Race:
 <input matInput type="text" formControlName="race">
 <div *ngIf="submitted && addUser.controls.lastName.errors" class="error">
   <div *ngIf="addUser.controls.race.errors.required">Race is Required!</div>
 </div>
</mat-form-field>
<br>
  <mat-form-field>
      House Number:
     <input matInput type="number" formControlName="number">
     <div *ngIf="submitted && addUser.controls.number.errors" class="error">
       <div *ngIf="addUser.controls.number.errors.required">House number is Required!</div>
     </div>
   </mat-form-field>
   <br>
   <mat-form-field>
      Street Name:
     <input matInput type="text" formControlName="street">
     <div *ngIf="submitted && addUser.controls.street.errors" class="error">
       <div *ngIf="addUser.controls.street.errors.required">Street Name is Required!</div>
     </div>
   </mat-form-field>
   <br>
   <mat-form-field>
      City:
     <input matInput type="text" formControlName="city">
     <div *ngIf="submitted && addUser.controls.city.errors" class="error">
       <div *ngIf="addUser.controls.city.errors.required">City is Required!</div>
     </div>
   </mat-form-field>
   <br>
   <mat-form-field>
      State:
     <input matInput type="text" formControlName="state">
     <div *ngIf="submitted && addUser.controls.state.errors" class="error">
       <div *ngIf="addUser.controls.state.errors.required">State is Required!</div>
     </div>
   </mat-form-field>
   <br>
   <mat-form-field>
      Zip Code:
     <input matInput type="text" formControlName="zip">
     <div *ngIf="submitted && addUser.controls.state.errors" class="error">
       <div *ngIf="addUser.controls.zip.errors.required">Zip Code is Required!</div>
     </div>
   </mat-form-field>
   <br>
   <mat-form-field>
      Company Name:
     <input matInput type="text" formControlName="companyName">
     <div *ngIf="submitted && addUser.controls.companyName.errors" class="error">
       <div *ngIf="addUser.controls.companyName.errors.required">Company Name is Required!</div>
     </div>
   </mat-form-field>
   <br>
   <mat-form-field>
    Job Title:
   <input matInput type="text" formControlName="jobTitle">
   <div *ngIf="submitted && addUser.controls.jobTitle.errors" class="error">
     <div *ngIf="addUser.controls.jobTitle.errors.required">Job Title is Required!</div>
   </div>
 </mat-form-field>
 <br>
 <mat-form-field>
  Employment Type:
 <input matInput type="text" formControlName="employmentType">
 <div *ngIf="submitted && addUser.controls.employmentType.errors" class="error">
   <div *ngIf="addUser.controls.employmentType.errors.required">Employment Type is Required!</div>
 </div>
</mat-form-field>
<br>
<mat-form-field>
  Monthly Salary:
 <input matInput type="text" formControlName="monthlySalary">
 <div *ngIf="submitted && addUser.controls.monthlySalary.errors" class="error">
   <div *ngIf="addUser.controls.monthlySalary.errors.required">Monthly Salary is Required!</div>
 </div>
</mat-form-field>
<br>
<mat-form-field>
  Industry:
 <input matInput type="text" formControlName="industry">
 <div *ngIf="submitted && addUser.controls.industry.errors" class="error">
   <div *ngIf="addUser.controls.industry.errors.required">Industry is Required!</div>
 </div>
</mat-form-field>
    <br>
  <button mat-raised-button color="primary" (click)="onSubmit()">Add User</button>
</form>

提交功能

onSubmit(){
  this.submitted = true;

  if(this.addUser.invalid){
    return;
  }

  this.success=true;
  if(this.success){
    var person = new Person()
    var address = new Address()
    var occupation = new Occupation()
    person.firstName = this.addUser.value.firstName
    person.middleName = this.addUser.value.middleName
    person.lastName = this.addUser.value.lastName
    person.homePhone = this.addUser.value.homePhone
    person.mobilePhone = this.addUser.value.mobilePhone
    person.workPhone = this.addUser.value.workPhone
    person.homeEmail = this.addUser.value.homeEmail
    person.workEmail = this.addUser.value.workEmail
    person.height = this.addUser.value.height
    person.weight = this.addUser.value.weight
    person.gender = this.addUser.value.gender
    person.race = this.addUser.value.race
    address.number = this.addUser.value.number
    address.street = this.addUser.value.street
    address.city = this.addUser.value.city
    address.state = this.addUser.value.state
    address.zip = this.addUser.value.zip
    occupation.companyName = this.addUser.value.companyName
    occupation.jobTitle = this.addUser.value.jobTitle
    occupation.employmentType = this.addUser.value.employmentType
    occupation.monthlySalary = this.addUser.value.monthlySalary
    occupation.industry = this.addUser.value.industry
    this.data.addOccupation(occupation)
    .subscribe
    (
      data =>
      {
          person.occupationId = data.id;
          this.data.addAddress(address)
          .subscribe
          (
            data =>
            {
                person.addressId = data.id
                this.data.addPerson(person)
                .subscribe
                (
                  resp =>
                  { 
                    if(resp.id!=null){
                      this.added = true;
                    }else{
                      this.added = false;
                    }              
                  },
                  data => 
                  {
                    this.objPerson = data

                  }
                )
      }
    )
      }
    )

  }
}

Angular Put Request #1

Angular Put Request #2

Console Error and logs

Answer 1

HTML 中有 (ngSubmit)="onSubmit()" 和 <button mat-raised-button color="primary" (click)="onSubmit()">Add User</button>。

删除一个。

我也会像这样编写 RxJS 流：

import { switchMap } from 'rxjs/operators';
....
this.data.addOccupation(occupation).pipe(
  switchMap(occupation => {
    person.occupationId = occupation.id;
    return this.data.addAddress(address);
  }),
  switchMap(address => {
    person.addressId = address.id;
    return this.data.addPerson(person);
  })
).subscribe(
  resp => {
    if (resp.id !== null) {
      this.added = true;
    } else {
      this.added = false;
    }
  } // I am not sure how you are assigned `this.objPerson = data` 
    // but you can do it in this subscribe
)

这样可以避免subscribes 的回调地狱。