Question

我正在将一些PHP Twig模板转换为一个新的Angular5项目，而且我仍然坚持如何处理一个简单的循环。

在我最初的Twig模板中，我有一系列循环的数据，包括Month列。数据已经按月排序，我使用它通过保存变量为循环中的每个月创建一个标题，如：

{% set savedMonth = '' %}
{% for result in results %}
    {% set thisMonth = result.month %}
    {% if savedMonth != thisMonth %}
        <tr bgcolor='#c0c0c0'>
            <td colspan='5' align='left'>{{ thisMonth }}</td>
        </tr>
        {% set savedMonth = thisMonth %}
    {% endif %}
    <tr>
        <td valign='top' align='left'><a href='{{ path("app_view_index", { 'id': doc.id }) }}'>{{ doc.id }}</a></td>

    </tr>
{% endfor %}

这是一个简化的示例，但您可以看到我们要查找字段更改，以便在每次更改开始时插入我的颜色行和月份。

现在我试图在Angular5中做同样的事情，但我无法弄清楚如何使用* ngFor进行循环并进行这种保存。它甚至可能吗？

<tr *ngFor="let result of searchResults">
  <td align="left" class="home"><a [routerLink]="['/view', result.id]">{{ result.id }}</a></td>
  <td align="left" class="home">Subjects here</td> 
</tr>

Answer 1

实际上经过一些游戏后我得到了一个工作版

in .ts

savedMonth: string;

changedMonth(month: any | string) {
 if (this.savedMonth === month) {
   return false;
  } else {
   this.savedMonth = month;
  return true;
 }
}

模板中的

：

<ng-container *ngFor="let result of searchResults">
   <tr *ngIf="changedMonth(result.month)" bgcolor='#c0c0c0'>
       <td colspan='5' align='left'>{{ result.month }} </td>
    </tr>
    <tr>
       <td align="left" class="home"><a [routerLink]="['/view', result.id]">{{ result.id }}</a></td>         
    </tr>
  </ng-container>

Angular2 ng为保存变量，迁移Twig

1 个答案: