Angular2 ng для сохранения переменной, миграции Twig - PullRequest
0 голосов
/ 28 апреля 2018

Я конвертирую некоторые шаблоны 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>

1 Ответ

0 голосов
/ 28 апреля 2018

На самом деле после некоторой тренировки я получил рабочую версию

дюймы .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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...