1

我正在开发我的第一个 Angular 应用程序，并且正在尝试将产品对象发布到我的 api。

我有一个组件列出了上述 api 上的所有产品

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { ToastrService } from 'ngx-toastr';
import { BsModalRef, BsModalService } from 'ngx-bootstrap';
import { Produto } from '../../models';
import { ProductComponent } from '../../dialogs/product/product.component';

@Component({
  selector: 'app-products',
  templateUrl: './products.component.html',
  styleUrls: ['./products.component.scss']
})
export class ProductsComponent implements OnInit {
  produtos    : Array<Produto>;
  bsModalRef  : BsModalRef;
  loading     : boolean = false;

  constructor(
    private http: HttpClient,
    private toastr: ToastrService,
    private modalService: BsModalService
  ) {}

  ngOnInit() {
    this.getProducts();
  }

  getProducts() {
    this.loading = true;
    this.http.get<Produto[]>(`<apiurl>`)
    .subscribe(
      response => {
        this.produtos = response;
        this.loading = false;
      },
      err => {
        this.toastr.error(err.error.message, 'Erro');
        this.loading = false;
      }
    );
  }

  newProduct() {
    this.bsModalRef = this.modalService.show(ProductComponent, {class: 'modal-lg'});
  }



}

这个组件有一个按钮，可以打开一个 bsmodal 来创建和发布一个新产品 - newProduct()

这是处理此问题的组件的 html 和 ts 文件

<form (ngSubmit)="create()" novalidate #f="ngForm">
    <div class="modal-header">
        <h4 class="modal-title pull-left">Novo produto</h4>
        <button type="button" class="close pull-right" aria-label="Close" (click)="cancel()">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>
    <div class="modal-body">
        <div class="row">
          <div class="col-md-6 col-sm-12">
              <div class="form-group">
                  <label>Nome</label>
                  <input type="text" name="nome"  [(ngModel)]="form.nome" class="form-control" required>
                  <div class="invalid-feedback">Este campo é obrigatório</div>
              </div>
          </div>
          <div class="col-md-6 col-sm-12">
              <div class="form-group">
                  <label>Preço</label>
                  <input type="number" name="preco"  [(ngModel)]="form.preco" class="form-control" required>
                  <div class="invalid-feedback">Este campo é obrigatório</div>
              </div>
          </div>
          <div class="col-md-6 col-sm-12">
              <div class="form-group">
                  <label>Altura</label>
                  <input type="number" name="altura"  [(ngModel)]="form.altura" class="form-control" required>
                  <div class="invalid-feedback">Este campo é obrigatório</div>
              </div>
          </div>
          <div class="col-md-6 col-sm-12">
              <div class="form-group">
                  <label>Largura</label>
                  <input type="number" name="largura"  [(ngModel)]="form.largura" class="form-control" required>
                  <div class="invalid-feedback">Este campo é obrigatório</div>
              </div>
          </div>
          <div class="col-md-6 col-sm-12">
              <div class="form-group">
                  <label>Profundidade</label>
                  <input type="number" name="profundidade"  [(ngModel)]="form.profundidade" class="form-control" required>
                  <div class="invalid-feedback">Este campo é obrigatório</div>
              </div>
          </div>
        </div>
    </div>
    <div class="modal-footer">
        <button type="submit" class="btn btn-success" [disabled]="f.invalid">
            <i class="fa fa-save"></i> Guardar
        </button>
        <button type="button" class="btn btn-danger" (click)="cancel()">
            <i class="fa fa-times-circle"></i> Fechar
        </button>
    </div>
</form>




import { Component, OnInit } from '@angular/core';
import { BsModalRef } from 'ngx-bootstrap';
import { Produto } from '../../models/Produto';
import { HttpClient } from '@angular/common/http';
import { ToastrService } from 'ngx-toastr';

@Component({
  selector: 'app-modal-product',
  templateUrl: './product.component.html',
  styleUrls: ['./product.component.scss']
})
export class ProductComponent implements OnInit {

  form            : Partial<Produto> = {
    nome          : "",
    preco         : 0,
    altura        : 0,
    largura       : 0,
    profundidade  : 0
  }
  canceled : boolean = false;
  constructor(public bsModalRef: BsModalRef, private http: HttpClient, private toastr: ToastrService) { }

  ngOnInit() {
    this.canceled = false;
  }

  create() {
    this.http.post<Produto>(`<apiurl>`, this.form).subscribe(
      response => {
        this.toastr.success('Produto adicionado com sucesso.', 'Sucesso');
        this.bsModalRef.hide();
      },
      err => {
        this.handleError(err);
      }
    );


  }

  cancel() {
    this.canceled = true;
    this.bsModalRef.hide();
  }


  private handleError(err) {
    this.toastr.error(err.error.message, 'Erro');
  }
}

但是，当我点击保存时，什么也没有发生，模态框就挂在那里。将不胜感激任何帮助。

4

0 回答 0