Angular 2 ng对于 prime-ng 数据列表中的不同类型

Question

我有一个“any”类型的数组，其中填充了动态数据:

let history: any = [];
history.push({ grouped_date: "Week No. 12", isHeader: true });
history.push({ activity: "go to work", project: "intern project" });
history.push({ activity: "eat some food", project: "no project" });

所以如果该项目是“分组日期”类型，我想以不同的方式显示我的数据。

<ul *ngFor="let item of items">
  <li>
    <div *ngIf="item.isHeader" style="background-color: #882346;">
        Week: {{item.grouped_date}}
    </div>
    <div *ngIf="item.activity != null" style="background-color: #fff;">
        activity: {{item.activity}}
    </div>
  </li>
</ul>

但问题是，列表总是显示第一个 div 容器。因此上面的示例显示了三次“周:第 12 周”。如何迭代这样的列表以将某些行显示为“分隔符”？

更新:

好吧，这很奇怪，Wassim Chegham 的答案非常有效。所以我会更具体(我只是用一个小例子来分解问题)。

我使用PrimeNG DataList ，这是一个用于在 ListView 中显示数据的组件。源码的使用方式与上面的示例相同:

<div class="ui-datalist-content ui-widget-content">
            <ul class="ui-datalist-data">
                 <li *ngFor="let item of dataToRender">
                            <template [pTemplateWrapper]="itemTemplate" [item]="item"></template>
                </li>
          </ul>
</div>

(请参阅完整源代码的链接)。但数据显示错误，如上所述。这里出了什么问题，我如何使用 prime-ng 正确显示数据？

Answer 1

您提交的代码似乎没问题。它甚至可以满足您的要求。 这是完整的示例:

import {Component, NgModule} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'

@Component({
  selector: 'my-app',
  template: `
    <ul *ngFor="let item of history">
  <li>
    <div *ngIf="item.isHeader" style="background-color: #882346;">
        Week: {{item.grouped_date}}
    </div>
    <div *ngIf="item.activity != null" style="background-color: #fff;">
        activity: {{item.activity}}
    </div>
  </li>
</ul>
  `,
})
export class App {
  history:any;
  constructor() {
    this.history = [];
    this.history.push({ grouped_date: "Week No. 12", isHeader: true });
    this.history.push({ activity: "go to work", project: "intern project" });
    this.history.push({ activity: "eat some food", project: "no project" });
  }
}

@NgModule({
  imports: [ BrowserModule ],
  declarations: [ App ],
  bootstrap: [ App ]
})
export class AppModule {}

查看这个plunkr:https://plnkr.co/edit/ycL1nQrKpjNsOMtDoijE?p=preview