时间戳

首页 > 解决方案 > 单击Angular 5中其他组件的复选框时更新组件数据

angular - 单击Angular 5中其他组件的复选框时更新组件数据

问题描述

我有两个组件：FoodComponent和CategoryComponent

在类别组件 html 中：

<div *ngFor="let category of categoryItems">
    <mat-checkbox data-id="{{category.id}}" (change)="loadFoods(category.id)">{{category.title}} ({{category.foodCount}})</mat-checkbox>
</div>

和

loadFoods(catId) {
   // update data to foodcomponent, I don't know how
}

在食物成分中：

<mat-card class="food-card" *ngFor="let food of foodItems">
  <mat-card-header>
    <!-- <div mat-card-avatar class="food-header-image"></div> -->
    <mat-card-title>{{food.title}}</mat-card-title>
    <mat-card-subtitle>&nbsp;</mat-card-subtitle>
  </mat-card-header>
  <img mat-card-image src="https://material.angular.io/assets/img/examples/shiba2.jpg" alt="Photo of a Shiba Inu">
  <mat-card-content>
    <div>
      {{food.description}}
    </div>
  </mat-card-content>
  <mat-card-actions>
    <button mat-raised-button color="primary" class="left">Add to cart</button>
    <button mat-raised-button color="warn" class="left">Add to favourite</button>

    <button mat-button class="right">{{food.price}} USD</button>
    <div class="clear"></div>
  </mat-card-actions>
</mat-card>

在foodItems中初始化FoodComponent。

两者都有单独的服务：FoodService 和 CategoryService，它们向 api 发出 http 请求。

如何将数据从 CategoryComponent（存在更改事件）发送到 FoodComponent 并更新该数组foodItems？

标签： angular

解决方案

因此，如果这两个组件具有父子关系，您可以只使用 @Input() @Output() 属性。因此，如果子组件发生更改并且您只想.emit(newValue)通过@Output() 通知父组件。

如果他们没有父子关系，您可以简单地创建一个单例服务并通过推送新状态并订阅从另一个组件获取最新更改来与可观察者/主题共享状态。这是一些可以帮助https://angular.io/guide/component-interaction的代码

如果您需要更多帮助，请告诉我们，但最好分享这些服务的更多代码。

现场示例：https ://stackblitz.com/edit/angular-ga7qfp 我在导入 Http 客户端时遇到了一些问题，但即使您从 http 获取数据，共享状态也应该非常相似。

推荐阅读