如何终止和迭代angular2中的嵌套ngFor

Question

我需要使用嵌套的 ngFor 在 UI 模板列表下方显示：

17th March, 2017:
07:26 AM Item1,Item2,Item3
07:15 AM Item6,Item5,Item4
07:10 AM Item7,Item8,Item9

16th March, 2017:
08:26 AM Item10,Item20,Item30
08:15 AM Item60,Item50,Item40
06:10 AM Item70,Item80,Item90

我面临的挑战是我得到一个 JSON 如下：

[{
"date":"17th March, 2017",
"time":"07:26 AM",
"items":"item1,item2,item3"
},{
"date":"17th March, 2017",
"time":"07:15 AM",
"items":"item6,item5,item4"
},{
"date":"17th March, 2017",
"time":"07:10 AM",
"items":"item7,item8,item9"
},{
"date":"16th March, 2017",
"time":"08:26 AM",
"items":"item10,item20,item30"
},{
"date":"16th March, 2017",
"time":"08:15 AM",
"items":"item60,item50,item40"
},{
"date":"16th March, 2017",
"time":"06:10 AM",
"items":"item70,item80,item90"
}
]

有人 help/suggest 可以告诉我如何形成嵌套模板以显示上面的列表并在日期根据数据更改时终止内部 ngFor。

Answer 1

使用两个 Pipe，它可能看起来像这样：

也许不需要 StringToArrayPipe，如果您只想显示该字符串..

@Pipe({ name: 'stringToArray' })
export class StringToArrayPipe implements PipeTransform {
  public transform(value: string): string[] {
    if (!value) return [];
    return value.split(',');
  }
}

@Pipe({ name: 'mergeDuplicates' })
export class MergeDuplicatesPipe implements PipeTransform {
  public transform(values: any[]): any[] {
    if (!values || !values.length) return [];
    return values.reduce((prev, cur) => {
      const tmp = prev.find(v => v.date == cur.date);
      if (!tmp) {
        prev.push({
          date: cur.date,
          timeAndItems: [
            { time: cur.time, items: cur.items }
          ]
        });
      }
      else {
        tmp.timeAndItems.push({
          time: cur.time,
          items: cur.items
        });
      }
      return prev;
    }, []);
  }
}

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>Hello {{name}}</h2>

      <div *ngFor="let d of (_data | mergeDuplicates)">
         <b>{{ d.date }}</b>
         <ul>
          <li *ngFor="let timeAndItems of d.timeAndItems">
            <b>{{ timeAndItems.time }}</b>
            <span style="margin-left: 5px;" *ngFor="let i of (timeAndItems.items | stringToArray)">{{ i }}</span>
          </li>
         </ul>
      </div>

    </div>
  `,
})
export class App {
  name:string;

  private _data = [
    {
      "date":"17th March, 2017",
      "time":"07:26 AM",
      "items":"item1,item2,item3"
    },{
      "date":"17th March, 2017",
      "time":"07:15 AM",
      "items":"item6,item5,item4"
    },{
      "date":"17th March, 2017",
      "time":"07:10 AM",
      "items":"item7,item8,item9"
    },{
      "date":"16th March, 2017",
      "time":"08:26 AM",
      "items":"item10,item20,item30"
    },{
      "date":"16th March, 2017",
      "time":"08:15 AM",
      "items":"item60,item50,item40"
    },{
      "date":"16th March, 2017",
      "time":"06:10 AM",
      "items":"item70,item80,item90"
    }
  ];

  constructor() {
    this.name = 'Angular2'
  }
}

现场演示：https://plnkr.co/edit/W1dJzqiSqhy83rmY4Xyc?p=preview

Answer 2

使用

<div ng-repeat="outer in list | unique:'date' >
    <h1>{{outer.date}}</h1>
    <div ng-repeat="inner in list" ng-if="inner.date===outer.date">
        <h4>{{inner.time}}</h4> : {{inner.items}}</h4>
    </div>
</div>

外循环获取唯一日期

内循环在inner.date = outer.date

时显示时间和项目

此外 .. 如果 items 是一个列表，那么您需要第三个循环，与上面的逻辑相同

如何终止和迭代angular2中的嵌套ngFor

How to terminate and iterate on nested ngFor in angular2

html

ngfor

angular