Question

我有一个＆＃34;任何＆＃34;类型的数组，其中充满了动态数据：

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" });

所以如果项目是＆＃34;分组日期＆＃34;的类型，我希望显示不同的数据。

<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容器。所以上面的样本显示了三次＆＃34;周：第12周和第34周。如何迭代这样的列表以显示一些行＆＃34; divider＆＃34;？

更新

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

我使用PrimeNG DataList，它是用于在列表视图中显示数据的组件。源代码使用与上面示例相同的方式：

<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

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

1 个答案: