リストディバイダーの一覧（角型）4

Question

リストディバイダーを使用して項目を分類する際に問題があります。 仕切りには月の名前が付いていなければならず、アイテムにはその月に投稿されたアイテムが必要です。私が達成しようとしている何

：

- August 
    - list item 1 
    - list item 2 
- September 
    - list item 3 
    - list item 4 
    - list item 5 

リストの各項目は、私はから月を抽出日時のタイムスタンプを持っています。私は多くの事を試してみた

export class PostItemService { 
    groupedItems = []; 

    // second item is the date timestamp 
    items: item[] = [ 
    new item('cool title', 1503469292, 'some cool text'), 
    new item('second title', 1503469292, 'some cool text'), 
    new item('third title', 1503469292, 'some cool text'), 
    ]; 

    splitOnMonth() { 

    const items = this.items; 
    const groupedItem = []; 

    // extract the month number 
    function convertTimeStamp(timestamp) { 
     const date = new Date(timestamp * 1000); 
     const monthNumber = date.getMonth() + 1; 

     return monthNumber; 
    } 

    items.forEach((value, index) => { 

     const myMonth = convertTimeStamp(value.date); 

     // Actually, I don't now where to go from here 

    }); 

    } // splitOnMonth() 

} 

を試してみたが、私はそれがここでそれを追加する必要はないと思う何

。主なものは次のとおりです。私はここからどこに行くべきか分からない。

誰かが遭遇して同じ問題を解決したり、これを手伝ってくれることを願っています。

ありがとうございます。

Answer 1

、項目が含まれている。このngForで

*ngFor="let item of items | ItemsFilterPipe" 

月ごとにオブジェクトをマップし、各オブジェクトに2つのプロパティ、名前、その月のすべてのアイテムを含む配列を作成します。すべてのアイテムを繰り返してその月を見つけ、対応する月の空の配列にプッシュします（オブジェクトがまだ存在しない場合はオブジェクトを作成します）。テンプレート内で、月配列を繰り返し、項目がある場合にのみ表示します。 1つ以上のサブアイテムがあり、サブアイテムがある場合はその配列を繰り返し処理します。

UPDATE - Plunkrリンク - いくつかのコンポーネントのテンプレートでhttps://plnkr.co/edit/w6EaEe9yoVMr7OKExXwc?p=preview

export class PostItemService { 

    monthMap : { [index : number] : { monthName: string, items: item[] }}; 
    monthArray: any[] = []; 

    items: item[] = [ 
     new item('cool title', 1503469292, 'some cool text'), 
     new item('second title', 1503469292, 'some cool text'), 
     new item('third title', 1503469292, 'some cool text'), 
    ]; 

    constructor() { 
     this.monthMap = { 
      1: { monthName: 'January', items: [] }, 
      2: { monthName: 'February', items: [] }, 
      3: { monthName: 'March', items: [] }, 
       // ... and so on ... dont want to type it all 
       // you could build this iteratively if you just had a 12 length array of the string names, but its easier to show it explicitly for the example 
       // ideally you could just create an empty map and only add a month object if it ends up with items, that would prevent you from having to check lengths later. 
     }; 

     this.splitOnMonth(); 
    } 

    splitOnMonth() { 

    // extract the month number 
    var convertTimeStamp = (timestamp)=> { 
     const date = new Date(timestamp * 1000); 
     const monthNumber = date.getMonth() + 1; 
     return monthNumber; 
    } 

    items.forEach((value, index)=>{ 

      const myMonth = convertTimeStamp(value.date); 

      this.monthMap[myMonth].items.push(value); 
    }); 

    // after that method completes, you can convert your month map to an array, only adding the numbered objects to the array if they have items in their items array 

    for (let prop in monthMap) { 
     if (this.monthMap[prop].items.length > 0) { 
      this.monthArray.push(this.monthMap[prop]); 
     } 
    } 

    // now you have an array you can iterate through in the template of a component somewhere 
    } 

} 

...

それを行う必要があります

<ul class="month-groups"> 
    <li *ngFor="let month of this.monthArray"> 
     {{ month.monthName }} 
     <ul class="month-items"> 
      <li *ngFor="let item of month.items"> 
       {{ item.value }} // or whatever info from items you need to show 
      </li> 
     </ul> 
    </li> 
</ul> 

、あなただけの、おそらく異なるULの適切スタイルにしたいと思いますし、ネストした余白を余分に追加することもできます。

注 - あなたのforEach関数に太い矢印がありませんでした。また、 - 角度では、コンポーネントのコンストラクタで多くのことを避けたいのですが、レンダリングするビューが関連付けられていないため、サービスは問題ありません。私は上記の私の型付きの宣言からそれを分離し、それをより明確にするために、月の地図をコンストラクタでインスタンス化しました。これがサービスであれば、おそらくコンストラクタからsplitMonth（）メソッドを呼び出すことはできませんが、単にテストしたい場合は、簡単な方法です。

Answer 2

このためにパイプを作成することを検討する必要があります。このスニペットで

ルック：

@Pipe({ 
     name: 'ItemsFilterPipe', 
     pure: false 
    }) 
    export class ItemsFilterPipe implements PipeTransform { 
     transform(items: Item[]): FilteredItem[] { 
     // Here you can do whatever you want with your data like creating a new object with timestamp as key and the item as value 
     } 
    } 

、あなたは以下のようにそれを使用することができます：{：項目[] "1503469292"}