Question

我正在尝试输出按公共属性分组的项目数组。

例如：在这种情况下，我想列出按部门分组的每位员工的电话分机。

我的数据：

{ id: 0, name: 'Jim', department: 'Sales', extension: '346'},
{ id: 1, name: 'Joe', department: 'Accounting', extension: '318'},
{ id: 2, name: 'Kim', department: 'Accounting', extension: '338'},
{ id: 3, name: 'Sue', department: 'Sales', extension: '320'}

我的HTML：

<div *ngFor="let employee of employees">
  <h4>{{ employee.department }}</h4>
  <ul>
    <li>{{ employee.name }} - {{ employee.extension }}</li>
  </ul>
</div>

当前输出

<h4>Sales</h4>
<ul>
  <li>Jim - 346</li>
</ul>

<h4>Accounting</h4>
<ul>
  <li>Joe - 318</li>
</ul>

<h4>Accounting</h4>
<ul>
  <li>Kim - 338</li>
</ul>

<h4>Sales</h4>
<ul>
  <li>Sue - 320</li>
</ul>

期望的输出：

<h4>Sales</h4>
<ul>
  <li>Jim - 346</li>
  <li>Sue - 320</li>
</ul>

<h4>Accounting</h4>
<ul>
  <li>Joe - 318</li>
  <li>Kim - 338</li>
</ul>

This answer为Angular的旧版本实现了预期的结果，但我想知道Angular 2 +的最佳实践是什么。

条件换行项目

0 个答案: