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

我只想创建一个月份对象的地图，这些月份对象由月份编号标识，每个对象有2个属性，名称和包含该月份所有项目的数组。遍历所有项目以找到它们的月份然后将它们推入相应月份的空数组（如果它尚不存在则创建对象），然后在模板中迭代月份数组并仅显示项目一个或多个子项，如果它们有子项，则迭代该数组。

更新 - 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
      }
    }

你可以按照以下方式使用它：

*ngFor="let item of items | ItemsFilterPipe"

在此ngFor中，项目包含{＆＃34; 1503469292＆＃34;：Item []}

列出Angular 4

2 个答案: