Закрытие компонента диалога на основе ответа API

Question

У меня есть компонент с именем AddCustomerComponent, который я вызываю как компонент диалога. В AddCustomerComponent после заполнения полей ввода я выполняю POST операцию. Теперь операция POST работает нормально.

Но после POST операции, основанной на ответе API, я хочу выполнить следующие операции:

• Если POST успешен, тогда диалог (AddCustomerComponent) должен закрыться.
• Если нет, то диалоговое окно не должно закрываться.

Ниже приведены мой код компонента и код службы файла:

HTML

<form [formGroup]="addForm">
    <mat-form-field>
        <input matInput placeholder="Name" formControlName="name" required>
        <mat-error *ngIf="addCusForm.controls.name.hasError('required')">
            Please enter your name
        </mat-error>
    </mat-form-field>
    <mat-form-field>
        <input placeholder="Email Address"  formControlName="email" required>
        <mat-error *ngIf="addCusForm.controls.email.hasError('required') ">
            Please enter email address
        </mat-error>
    </mat-form-field>
    <button mat-flat-button  type="submit" (click)="onAddCustomer()">Save</button>
    <button mat-flat-button  type="button">Cancel</button>  
</form>

TS

import { Component, OnInit } from '@angular/core';
import {
  FormBuilder,
  FormGroup,
  Validators,
} from '@angular/forms';
import { MatDialog, MatDialogRef } from '@angular/material';
import { ICustomer } from 'src/app/models/app.models';
import { CustomersService } from 'src/app/services/customers.service';

@Component({
  selector: 'awa-add-customer',
  templateUrl: './add-customer.component.html',
  styleUrls: ['./add-customer.component.css'],
})
export class AddCustomerComponent implements OnInit {
  public addForm: FormGroup;
  public someCustomer: ICustomer;

  constructor(
    private fb: FormBuilder,
    public dialog: MatDialog,
    public customersService: CustomersService,
  ) {}

  public ngOnInit(): void {
    this.addForm = this.fb.group({
      name: [null,[Validators.required]],
      email: [null,[Validators.required]],
    });
  }

  public onAddCustomer(): void {
    this.someCustomer = this.addForm.value;
    this.customersService.addCustomer(this.someCustomer);
  }

}

Служба Fle

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { ICustomer } from 'src/app/models/app.models';

@Injectable({
  providedIn: 'root',
})

export class CustomersService {
 private  baseUrl : string = '....api URL.....';

 constructor(private http: HttpClient) {}

  public async addCustomer(customer: ICustomer ): Promise<void>  {
    const apiUrl: string = `${this.baseUrl}/customers`;
    let temp : any;
    temp =  this.http.post(apiUrl, customer).subscribe(data => {
        alert('Customer added successfully');
    },error => {
        console.log(error);
    });
  }

}

Answer 1

Вам просто нужно вернуть обещание Post post от вашего сервиса и подписаться на него, чтобы закрыть диалоговое окно, если вызов http не прошел хорошо.

Во-первых, не забудьте вернутьсяВаше обещание в методе обслуживания:

public addCustomer(customer: ICustomer ): Promise<void>  {
  const apiUrl: string = `${this.baseUrl}/customers`;
  return this.http.post(apiUrl, customer);
  // I removed the subscribe() here since you can have only one per promise
  // But you can use Rxjs 'pipe' operation if necessary.
}

Затем подпишитесь на обещание при вызове метода addCustomer():

public onAddCustomer(): void {
  this.someCustomer = this.addForm.value;
  this.customersService.addCustomer(this.someCustomer).subscribe(
    () => // POST is ok, close dialog,
    (error) => // do nothing, or alert
  );
}

Answer 2

Вы должны работать с обещанием, возвращенным из сервиса.

public onAddCustomer(): void {
this.someCustomer = this.addForm.value;
this.customersService.addCustomer(this.someCustomer)
  .then(
    // add success code here
  )
  .catch(
    // add error code here
  )

}

Answer 3

Здесь, вместо подписки на служебный файл, подпишитесь на свой компонент, чтобы вы могли применять свои условия, как показано ниже.

Service.ts

 public addCustomer(customer: ICustomer ) : Observable<any>  {
    const apiUrl: string = `${this.baseUrl}/customers`;
    return this.http.post(apiUrl, customer);
  }

component.ts

 public onAddCustomer(): void {
    this.someCustomer = this.addForm.value;
    this.customersService.addCustomer(this.someCustomer).subscribe(data => {
        alert('Customer added successfully');
        this.dialogRef.close();
    },error => {
    // do not close dialog when error.
        console.log(error);
    });
  }

Надеюсь, эта помощь!

Answer 4

Вы должны закрыть ссылку на диалог. Я думаю, что наблюдаемый - это хороший выбор.Ваш сервис может быть таким.

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { ICustomer } from 'src/app/models/app.models';
import { Observable} from 'rxjs';

@Injectable({
  providedIn: 'root',
})

export class CustomersService {
 private  baseUrl : string = '....api URL.....';

 constructor(private http: HttpClient) {}

  public async addCustomer(customer: ICustomer ): Observable<any>  {
    const apiUrl: string = `${this.baseUrl}/customers`;
    let temp : any;
    return this.http.post(apiUrl, customer);
  }

}

Ваш компонент будет выглядеть так.

import { Component, OnInit } from '@angular/core';
import {
  FormBuilder,
  FormGroup,
  Validators,
} from '@angular/forms';
import { MatDialog, MatDialogRef } from '@angular/material';
import { ICustomer } from 'src/app/models/app.models';
import { CustomersService } from 'src/app/services/customers.service';

@Component({
  selector: 'awa-add-customer',
  templateUrl: './add-customer.component.html',
  styleUrls: ['./add-customer.component.css'],
})
export class AddCustomerComponent implements OnInit {
  public addForm: FormGroup;
  public someCustomer: ICustomer;

  constructor(
    private fb: FormBuilder,
    public dialog: MatDialog,
    public dialogRef: MatDialogRef<AddCustomerComponent>
    public customersService: CustomersService,
  ) {}

  public ngOnInit(): void {
    this.addForm = this.fb.group({
      name: [null,[Validators.required]],
      email: [null,[Validators.required]],
    });
  }

  public onAddCustomer(): void {
    this.someCustomer = this.addForm.value;


  this.customersService.addCustomer(this.someCustomer).subscribe((respons)=>{
   // validate the response here and then close the dialog
    // after successfull adding customer
    this.dialogRef.close();
    });

  }

}