點擊事件后不顯示Angular組件之間的共享資料

我希望在我的 Angular 應用程式中productCategory，在組件 1 中發生單擊事件之后，組件 1 和組件 2 之間共享一個產品陣列（這兩個組件沒有任何關系）。我試圖以這種方式創建服務來實作這個目標：

import { Injectable } from '@angular/core'; 
import { Product } from '../product';

@Injectable({   providedIn: 'root' }) 
export class SharedService {   
  productsCategory: Product[]=[];

  constructor() { }

  setProductCategory(data: Product[]){
    this.productsCategory=data;   }

  getProductCategory(){
    return this.productsCategory;   } }

但是當點擊事件發生時，瀏覽器頁面上沒有任何顯示，陣列只在瀏覽器控制臺上列印出來。

這是component1的html代碼中的點擊事件：

<mat-menu #makeup="matMenu">
    <button mat-menu-item (click)="categoryFilter('Make-up eyes')" routerLink="/products/searchProduct/by_category"  routerLinkActive="active">Eyes</button>
    ...
</mat-menu>

組件1.component.ts

 export class Component1 implements OnInit {
      public productCategory: Product[]=[];
      displayedColumns = ['name', 'description', 'price']
      constructor(private  shared: SharedService,private productService: ProductService){}
    
      ngOnInit():void {
    
      }
    
      public categoryFilter(category: string): void{
        this.productService.getProductsByCategory(category).subscribe(
          (response: Product[]) => {
            this.productCategory=response;
            this.shared.setProductCategory(this.productCategory);
            console.log(response);
    
          },
          (error: HttpErrorResponse)=>{
            alert(error.message);
          }
        )
      }
    }

組件2.component.ts：

    export class Component2 implements OnInit {
      public productCategory: Product[]=[];
      displayedColumns = ['name', 'description', 'price']
      constructor(private shared: SharedService
      ) { }
    
      ngOnInit(): void {
        this.productCategory=this.shared.getProductCategory();
    
      }
    }

組件2.component.html：

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


  <ng-container matColumnDef="position">
    <th mat-header-cell *matHeaderCellDef> No. </th>
    <td mat-cell *matCellDef="let productCategory"> {{productCategory.position}} </td>
  </ng-container>


  <ng-container matColumnDef="name">
    <th mat-header-cell *matHeaderCellDef> Name </th>
    <td mat-cell *matCellDef="let productCategory"> {{productCategory.name}} </td>
  </ng-container>


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


  <ng-container matColumnDef="price">
    <th mat-header-cell *matHeaderCellDef> Price </th>
    <td mat-cell *matCellDef="let productCategory"> {{productCategory.price}} </td>
  </ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

uj5u.com熱心網友回復：

使用 observables 而不是 getter：

 export class SharedService {   
  private productsCategory: new BehaviorSubject<Array<Product>>([]);

  public productsCategory$:Observable<Array<Product>> = this.productsCategory.asObservable()

  constructor() { }

  setProductCategory(data: Product[]){
    this.productsCategory.next(data);   }

訂閱組件中的公共 observable

標籤：

上一篇：基于按鈕單擊啟用/禁用切換

下一篇：無法在SafeSubscriber._next(notifications-query.component.ts:56:21)讀取null的屬性（讀取“訊息”）