Angular 在 ngFor 中获取项目值

Question

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

我实际上将项目从 parent ngFor 传递到 child 所以我可以获得 items.username.

Parent 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.组件:

@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>

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

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

在 child-component 中，我正在尝试将 ngFor 值传递给 hashset 并检查该用户名是否已经存在。我如何获得 item.username 值并将其传递给 hashSet 以及是否有适当的方法来实现它。我检查了 console.log，仅 3 个项目就收到了数百个回复。你能建议一个正确的方法来实现它吗？

Answer 1

好的，为了运行根据您的需要，我必须按用户名对项目进行分组，我在 ngFor 上使用了 KeyValue 管道，您可以在这里阅读 https://angular.io/api/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>

Angular 在 ngFor 中获取项目值

Angular get items value in ngFor

angular

typescript

ngfor