Question

尝试使用Angular格式化表格，其中：

如果当月的某一天发生变化，那么您插入一个仅包含日期的新行（但也会在下面显示该索引值的数据）。如果星期几与之前相同，则继续插入行。

1）显然我的代码用于访问索引中的先前值是错误的，但我似乎无法找到任何明显有帮助的东西。

2）我意识到我当前的代码会比较完整的日期时间值而不仅仅是月份（或周）的日期，但我不确定如何在这种情况下执行此操作。

3）当日期发生变化并且我尝试插入日期行时，我无法获得正确格式化的其他新行，其中包含该索引值的数据。我尝试过各种各样的组合。

请有人帮助纠正此代码或指出我正确的方向

由于

<table class="table-striped">
    <thead>
        <tr>
            <td>day</td>
            <td>time</td>
            <td>region</td>
            <td>event</td>
            <td>period</td>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let eco of eco_r ; let i = index"> 

        <template [ngIf]="eco.date != eco[i-1].date">
            <td colspan="5">{{eco.datetime| date:'longDate' }}</td>
          <tr>   
            <td>{{eco.datetime | date:'EE'}}</td>
            <td>{{eco.datetime | date:'shortTime'}}</td>
            <td>{{eco.region}}</td>
            <td>{{eco.event}}</td>
            <td>{{eco.period}}</td>
          </tr>
        </template>

        <template [ngIf]="eco.date == eco[i-1].date">
            <td>{{eco.datetime | date:'EE'}}</td>
            <td>{{eco.datetime | date:'shortTime'}}</td>
            <td>{{eco.region}}</td>
            <td>{{eco.event}}</td>
            <td>{{eco.period}}</td>
          </template>

        </tr>
    </tbody>
</table>

------------ UPDATE ---------------

根据@Iancovici的评论，我修改了以下内容

i）更正为参考eco_r[i-1].date

ii）更改了sql源以提供eco.day_of_month和eco.week_of_year，以便更容易引用和检查条件

iii）更新代码，仅在i > 0

时检查以前的值

我仍然无法显示带有日期的新行，并且还在正确格式化的单独行中包含该值i的数据。在修改后的代码中使用将所有5个值放入下一行的第一列，并将混乱放入表格格式。我该如何解决这个问题？

谢谢

  <template [ngIf]="i >0 && eco.day_of_month != eco_r[i-1].day_of_month">
        <tr><td colspan="5">{{eco.datetime| date:'longDate' }}</td>
        </tr>
            <tr> <td>{{eco.datetime | date:'EE'}}</td>
                 <td>{{eco.datetime | date:'shortTime'}}</td>
                 <td> {{eco.region}} </td>
                 <td>{{eco.event}}</td>
                 <td>{{eco.period}}</td>
            </tr>
         </template>

Answer 1

一般来说，*ngIf可能不是[ngIf]。但我在你的情况下看到它没关系，因为你使用的是一个ng模板，而不是指令* ngIf它不是一个绑定属性[ngIf]

此外，您正在访问同一个实例，应该访问数组的索引，以便... 改变

*ngIf="eco.date == eco[i-1].date">

到

*ngIf="eco.date == eco_r[i-1].date">

更新：另外两个笔记

确保您创建一个带有标记
如果条件表达变得更复杂，不要害怕使用paranthesis，所以你可以区分这两个条件。

在没有过滤器的情况下尝试此操作，然后将过滤器集成在。

中

<table>
  <div *ngFor="let eco of eco_r; let i = index">
    <div *ngIf="(i > 0) && (eco.day_of_month != eco_r[i-1].day_of_month)">
      <tr>
        <td colspan="5">{{eco.datetime }}</td>
      </tr>
      <tr>
        <td>{{eco.datetime }}</td>
        <td>{{eco.datetime }}</td>
        <td> {{eco.region}} </td>
        <td>{{eco.event}}</td>
        <td>{{eco.period}}</td>
      </tr>
    </div>
  </div>
</table>

Angular 2+：基于先前索引日期值ngIf NgFor的条件

1 个答案:

更新：另外两个笔记