Angular获取项目价值NGFOR

Question

目前正在迭代 cart.items。每个项目都有所有者的用户名，我想显示所有者的用户名和我购买的产品。问题是我只能迭代 cart.items 而不是所有者的用户名，所以我得到了重复的购物车项目。

我实际上将 item 从父 ngFor 传递给子，这样我就可以获得 items.username。

父 html：

<ng-container *ngIf="cart.items.length">
    <div *ngFor="let item of cart.items">
        <chlid-component [item]="item"></child-component>
    </div>
</ng-container>

我从 cartService 获取 cart.items。

child-component.component：

@Input() item: ICartItem;
username: string;

getUser() {
    const user = this.userService.getUser(this.item.user).subscribe(
      (user: IUser) => {
        this.username = user.username;
        this.userImage = user.image;
      }
    )
  }

chlid-component.html：

<ng-container *ngIf="(cart$ | async) as cart">
    <div class="avatar">
        <div class="name" routerLink="/users/{{username}}">{{username}}</div>
    </div>
<ng-container *ngFor="let item of cart.items">
    <div class="item" *ngIf="item.user == username">
        // some code here
    </div>               
</ng-container>

我从父级的项目中获取用户名，以列出我从所有者那里购买的项目。但存在一个问题，我可以从所有者那里购买多个物品，因此它会显示所有者的物品两次。即

User-1:    User-1:   User-2:
item1,     item1,    item3
item2,     item2

在子组件中，我尝试将 ngFor 值传递给哈希集并检查该用户名是否已经存在。我如何获取 item.username 值并将其传递给 hashSet 以及是否有正确的方法来实现这一点。我检查了 console.log，只得到了 3 个项目的数百条响应。您能提出实现这一目标的正确方法吗？

Answer 1

好的，要根据您的需求运行它，我必须按用户名分组这些项目，而它们使用了ngfor上的KeyValue管道，您可以在此处阅读 https://angular.io/api/common/common/keyvaluepipe

这是更新的 stackblitz

分组项目

 this.cart.items.forEach((item) => {
  if (!this.groupedItems[item.username]) {
    this.groupedItems[item.username] = [];
  }
  this.groupedItems[item.username].push(item);
});

和显示

<div *ngFor="let group of groupedItems | keyvalue">
  <div class="avatar">
    <div class="name">{{ group.key }}</div>
  </div>

  <div *ngFor="let item of group.value">
    <app-child [item]="item"></app-child>
  </div>
</div>