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

【问题标题】：How to terminate and iterate on nested ngFor in angular2如何在angular2中终止和迭代嵌套的ngFor
【发布时间】：2017-08-13 09:34:23
【问题描述】：

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

2017 年 3 月 17 日：
07:26 AM 第 1 项、第 2 项、第 3 项
07:15 上午 第 6 项， Item5,Item4
07:10 AM Item7,Item8,Item9

2017 年 3 月 16 日：
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"
}
]

所以有人可以帮助/建议我如何形成一个嵌套模板以显示上面的列表并在日期根据数据更改时终止内部 ngFor。

【问题讨论】：

嵌套部分在哪里？只有一个数组。
@YounesM 第一个循环已按时完成，第二个循环按 JSON 已按时完成，如果您需要更多信息，请告诉我。
请发布代码，说明您尝试了什么以及失败的地方。
我可以在 Angular 1 中添加一个答案然后你转换它吗？？
@ModarNa 是的，我也很擅长 angular1，所以请继续。我将转换为 angular2。

标签： html angular ngfor

【解决方案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

【讨论】：

外循环应该得到唯一的值，否则会产生重复..见上面的OP格式

【解决方案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 相同的逻辑。