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

Question

嘗試使用Angular格式化表格，其中：

如果每月的日期發生變化，那么您將插入一個新行，其中僅包含日期（但還會在下面立即顯示該索引值的數據）。 如果星期幾與之前相同，則繼續插入行。

1）顯然我訪問索引中先前值的代碼是錯誤的，但是我似乎找不到任何有幫助的東西。

2）我意識到我的當前代碼將比較完整的datetime值，而不只是比較一個月（或一周）的日期，但是我不確定在這種情況下如何執行此操作。

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

通常應該是*ngIf而不是[ngIf] 。 但是我認為在您的情況下還可以，因為您使用的是ng模板，這意味着而不是指令* ngIf不是綁定屬性[ngIf]

另外，您要訪問同一實例，應改為訪問數組的索引，以使..從

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

至

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

更新：還有兩個筆記

• 確保創建帶有標簽的表格
• 如果條件表達式變得更復雜，不要害怕使用括號，因此您可以區分這兩個條件。

在沒有過濾器的情況下嘗試此操作，然后將過濾器集成到其中。

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