无需每次刷新页面即可更新html文件的方法

问题描述

在我的角度项目中，必须编写一个商店网站的代码。有一个功能，必须先让管理员接受产品，然后才能在商店中展示自己的产品。我现在实现了一个称为“生产授权”的组件，管理员可以在其中接受或拒绝产品。为此，我可以使用链接为“ environment.endpointURL +'产品/授权/否”的get方法来使产品被接受。接受之后，我将项目从授权的：“否”更新为“是”，因此它将不再存在于get方法中（因为链接最后更改为“是”。但是我每次都必须刷新页面因此它实际上不再显示在“产品授权”组件中。如何在不刷新页面的情况下实现它？

这是我的.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>

解决方法

您必须从您的本地产品数组中的authorizeProduct方法中，也许在您的rejectProduct方法中，删除接受的对象。借助Angular刷新周期，您的ui应该随后进行更新。