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

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>

------------更新---------------

在@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

应该是qazxsw poi一般不是qazxsw poi。但我在你的情况下看到它没关系因为你正在使用ng模板而不是指令* ngIf它不是一个绑定属性[ngIf]

你也正在访问同一个实例，应该访问数组的索引，所以改变

*ngIf

至

[ngIf]

Update: Two more notes

• 确保使用标记创建表格
• 如果条件表达式变得更复杂，请不要害怕使用括号，因此您可以区分这两个条件。

尝试不使用过滤器，然后集成过滤器。

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