如何終止和angular2

我需要顯示以下UI模板列表中嵌套ngFor重複使用嵌套ngFor：如何終止和angular2

2017年3月17日：
上午07點26分項目1，項目2，項目3
07:15上午項6，項目5，項目4
07:10上午 Item7，Item8，Item9

2017年3月16日：
上午08時26 Item10，Item20，Item30
08:15上午 Item60，Item50，Item40
上午6時10 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。

來源

2017-03-21 krsnaadi

哪裏是在嵌套的一部分？只有一個數組。 – YounesM

@YounesM第一個循環在日期，第二個按照JSON準時，如果您需要更多信息，請告訴我。 – krsnaadi

請張貼演示您嘗試過的方法以及失敗的代碼。 –

使用兩個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

來源

2017-03-21 16:36:19 mxii

外循環應該得到唯一的值，否則會產生重複..看到OP格式以上 –

@mxii超，謝謝..！ – krsnaadi

使用

<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

Morever ..如果items是一個列表，那麼你需要第三個循環相同的邏輯，上述

來源

2017-03-21 16:48:54

謝謝，根據上面的代碼，我認爲這對我來說很好。我會用angular2來嘗試相同的邏輯。 – krsnaadi

如何終止和angular2

回答

相關問題