angular - Angular：在 CRUD 应用程序中刷新后按钮消失

问题描述

我正在测试一个 CRUD 应用程序，但遇到了一个小问题；我有一个产品列表，如果我单击单个产品，我会找到它的所有详细信息。

在此选项卡中，除了字段之外，还有两个按钮；一个用于确认所做的更改（更新），另一个用于永久删除产品（删除）。如果我尝试修改产品的任何字段并确认该字段已正确修改；如果我再次尝试访问和修改任何字段，我注意到两个按钮（即更新一个和删除一个）消失了。

我怎么解决这个问题？

产品列表.component.ts

export class ProductListComponent implements OnInit {
  editProfileForm!: FormGroup;
  filterTerm!:string;
  selectedProduct: any;

  constructor(private productservice: ProductService, private fb: FormBuilder, private modalService: NgbModal) {} 

  productsArray: any[] = [];
  dtTrigger: Subject<any> = new Subject();

  products: Product[] = [];
  product: Product = new Product();
  deleteMessage = false;
  productlist: any;
  isupdated = false;
  isUpdating = false;
 
  ngOnInit() {
  this.productservice.getProductList().subscribe(data => {
    console.log(data)
    this.products = data;
    this.collectionSize=this.products.length;
    this.dtTrigger.next();
    })
    this.editProfileForm = this.fb.group({
      prodcode: [''],
      name: ['']
     });
  }

  openModal(targetModal: any, product: any) {
    this.modalService.open(targetModal, {
     centered: true,
     backdrop: 'static'
    });

    this.selectedProduct = product;
   
    this.editProfileForm!.patchValue({
     prodcode:product.prodcode, 
     name: product.name
     });
   }

  deleteProduct(prodcode: any) {
    this.productservice.deleteProduct(prodcode)
      .subscribe(
        data => {
          console.log(data);
          this.deleteMessage = true;
          this.isupdated=false;
          this.productservice.getProductList().subscribe(data => {
            this.products = data;
          })
        },
        error => console.log(error));
  }

  productupdateform = new FormGroup({
    prodcode: new FormControl(),
    name: new FormControl()
  });

  updateProd() {
    this.product = new Product();
    this.product.prodcode = this.editProfileForm.get('prodcode')!.value;
    this.product.name = this.editProfileForm.get('name')!.value;


    this.productservice.updateProduct(this.product.prodcode!,this.product).subscribe(
      data => {
        this.isupdated = true;
        this.isUpdating = false;
        this.productservice.getProductList().subscribe(data => {
          this.products = data
          this.modalService.dismissAll();
          console.log("res:", this.editProfileForm!.getRawValue());
        })
      },
      error => console.log(error));
  }

  changeisUpdate() {
    this.isupdated = false;
    this.isUpdating = false;
  }
}

产品列表.component.html

<div class="panel-heading">

    <div class="row" [hidden]="!deleteMessage">
      <div class="col-sm-4"></div>
      <div class="col-sm-4">
        <div class="alert alert-info alert-dismissible">
          <button type="button" class="close" data-dismiss="alert">×</button>
          <strong>Product delete</strong>
        </div>
      </div>
      <div class="col-sm-4"></div>
    </div>
  </div>

  <div class="panel-body">
    <table class="table table-hover table-sm">
      <thead class="thead-light">
        <tr>
          <th>Prod code</th>
          <th>Nome</th>
          <th>Delete</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let product of products">
            <td> <button type="button" class="btn btn-link" (click)="openModal(editProfileModal, product)" > {{product.prodcode}} </button></td>
          <td>{{product.name}}</td>
          <td><img src="https://upload.wikimedia.org/wikipedia/en/b/ba/Red_x.svg" width="15" height="20" (click)="deleteProduct(product.prodcode)">
          </td> 
        </tr>
      </tbody><br>
    </table>
    </div>

<ng-template #editProfileModal let-modal>
  <div class="modal-header">
    <h5 class="modal-title" id="editProfileLabel">Edit product</h5>
    <button type="button" class="close" (click)="modal.dismiss()" aria-label="Close">
    <span aria-hidden="true">&times;</span>
   </button>
  </div>

  <div class="modal-body">
    <form [formGroup]="editProfileForm" (ngSubmit)="updateProd()">
      <div class="form-group row">
        <label for="prodcode" class="col-sm-4 col-form-label">Prod code</label>
        <div class="col-sm-8">
          <input type="text" class="form-control" formControlName="prodcode" id="prodcode">
        </div>
      </div>
      <div class="form-group row">
        <label for="name" class="col-sm-4 col-form-label">Name</label>
        <div class="col-sm-8">
          <input type="text" class="form-control" formControlName="name" id="name">
        </div>
      </div>
      <div class="modal-footer">
        <button type="submit" class="btn btn-success" [hidden]="isupdated">Update</button>
        <td><button (click)="deleteProduct(selectedProduct.prodcode)" class='btn btn-danger' [hidden]="isupdated"><i class="fa fa-futboll-0">Delete</i></button>
      </div>
    </form>
  </div>
</ng-template>

标签： angular

angular - Angular：在 CRUD 应用程序中刷新后按钮消失

问题描述

解决方案

推荐阅读