不用每次都刷新页面就更新html文件的方法

Question

在我的 Angular 项目中，必须编写一个商店网站。有一个功能，产品必须先由管理员接受，然后才能在商店中展示。我现在已经实现了一个名为“生产授权”的组件，管理员可以在其中接受或拒绝产品。为此，我使用带有链接的 get 方法接受产品：“environment.endpointURL + 'products/authorized/no”。接受它后，我将项目从 authorized: 'no' 更新为 'yes' 所以它不会再出现在 get 方法中（因为最后链接更改为 'yes'。但我每次都必须刷新页面所以它真的不再显示在“产品授权”组件中。如何在不刷新页面的情况下实现它？

这是我的 .ts 文件：

import {Component, OnInit} from '@angular/core';
import {HttpClient} from "@angular/common/http";
import {environment} from "../../environments/environment";
import { Product } from '../models/product.model';

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

  isAdmin: boolean;

  products: Product[];

  displayedColumns: string[] = ['title', 'location', 'delivarable', 'description', 'price', 'acceptorreject'];


  constructor(private httpClient: HttpClient) { }



  ngOnInit(): void {

    this.getProducts()
  }

  getProducts(){
    return this.httpClient.get(environment.endpointURL + 'products/authorized/no').subscribe((res: any) =>
    {
      console.log(res);
      this.products = res;
    })
  }

  authorizeProduct(product: Product){
    product.authorized = "yes"
    product.status = "available"


    return this.httpClient.put(environment.endpointURL + 'products/' + product.productId, product ).subscribe((res: any) =>
    {
      console.log("Update:");
      console.log(res);

      //refresh page to update table
      this.refresh()

    })


  }

  rejectProduct(productId: number){
    return this.httpClient.delete(environment.endpointURL + 'products/' + productId).subscribe((res: any) =>
    {
      console.log("Delete:");

      //refresh page to update table
      this.refresh()
    })
  }

  refresh(): void {
    window.location.reload();
  }

}

这是我的 .html 文件

<h3>Products to be authorized:</h3>

<table
mat-table [dataSource]="products" class="mat-elevation-z8">

  <ng-container matColumnDef="title">
    <th mat-header-cell *matHeaderCellDef> Title </th>
    <td mat-cell *matCellDef="let element"> {{element.title}} </td>
  </ng-container>

  <ng-container matColumnDef="location">
    <th mat-header-cell *matHeaderCellDef> Location </th>
    <td mat-cell *matCellDef="let element"> {{element.location}} </td>
  </ng-container>

  <ng-container matColumnDef="delivarable">
    <th mat-header-cell *matHeaderCellDef> Delivarable </th>
    <td mat-cell *matCellDef="let element"> {{element.delivarable}} </td>
  </ng-container>

  <ng-container matColumnDef="description">
    <th mat-header-cell *matHeaderCellDef> Description </th>
    <td mat-cell *matCellDef="let element"> {{element.description}} </td>
  </ng-container>

  <ng-container matColumnDef="price">
    <th mat-header-cell *matHeaderCellDef> Price </th>
    <td mat-cell *matCellDef="let element"> {{element.price}} </td>
  </ng-container>

  <ng-container matColumnDef="acceptorreject">
    <th mat-header-cell *matHeaderCellDef> Authorize </th>
    <td mat-cell  *matCellDef="let element">
      <button mat-raised-button color="primary" (click)="authorizeProduct(element)">Accept</button>
      <button mat-raised-button color="warn" (click)="rejectProduct(element.productId)">Reject</button>
    </td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>

</table>

Answer 1

您必须在您的 authorizeProduct 方法和可能在您的 rejectProduct 方法中从本地产品数组中删除接受的对象。使用 Angular 刷新周期后，您的 ui 应该会更新。