时间戳

首页 > 解决方案 > 如何在Angular的html模板中声明和分配变量

angular - 如何在Angular的html模板中声明和分配变量

问题描述

我知道这个问题已经在 Stackoverflow 上提出过，但建议的解决方案不起作用。

我需要循环进入一个包含类别和项目的列表。我只想显示一次类别，所以我需要测试类别是否与前一个相同。如果相同，我不显示它，但如果不是，我显示新类别。因此我想声明一个变量来存储当前的类别名称。

可能吗？如果不是，我该如何测试以前的类别和新的类别？

谢谢

编辑：我获取数据的方法：

getMenuByTruck = () =>{
    const id: string = this.activeRoute.snapshot.params['id'];
    const apiMenu: string = environment.apiAddress + 'TruckMenu/' + id;

    this.repository.getData(apiMenu)
    .pipe(finalize(() => {
      this.updateTruckName();
    }))
      .subscribe(response => {
        this.menu = response as Menu[];
      },
      (error) =>{
        this.errorHandler.handleError(error);
        this.errorMessage = this.errorHandler.errorMessage;
      })
}

我的循环进入 html 代码：

<div class="title" *ngFor="let m of menu">
    <h3>{{m.foodCategory?.description}}</h3>
</div>

标签： angular

解决方案

您可以创建一个新的对象类型变量，该变量将来自原始数据的项目以唯一类别作为键。

假设我们有原始数据

originalData = [
    { category: 1, item: 'Jan' },
    { category: 2, item: 'Sarah' },
    { category: 1, item: 'Tom' },
    { category: 2, item: 'Nina' },
  ];

我们将声明一个新的空对象变量。使用reduce on，我们将检查by 键中originalData是否已经有一个条目作为名称。如果它在那里，我们将复制所有以前的项目（值），向其中添加一个新项目，否则我们将作为数组传递。acccategorycurrentObj

itemsByCategory = {};

this.itemsByCategory = this.originalData.reduce((acc, currentObj) => {
  acc[currentObj.category] = acc[currentObj.category]
    ? [...acc[currentObj.category], currentObj]
    : [currentObj];
  return acc;
}, {});

迭代的吸气剂itemsByCategory

  get categoryKeys(): string[] {
    return Object.keys(this.itemsByCategory);
  }

在模板中

<ul *ngFor="let key of categoryKeys">
  <li>
    Category : {{ key }}
    <p *ngFor="let obj of itemsByCategory[key]">
      {{ obj.item }}
    </p>
  </li>
</ul>

演示

如果您的菜单将类别作为对象，请查看此

推荐阅读