ngFor hoe om waarden te verpakken in div containers op basis van essentiële waarden

stemmen
0

Ik heb deze array in mijn hoek app

calendarDates = [
  {date: 2018-10-23, day: 23, month:10, year:2018, price:2313, date_is_valid: true},
  {date: 2018-10-24, day: 24, month:10, year:2018, price:2313, date_is_valid: true},
  ...
  {date: 2018-11-01, day: 1, month:11, year:2018, price:2313, date_is_valid: false},
  ...
  {date: 2019-02-01, day: 1, month:12, year:2019, price:2313, date_is_valid: true}
]

Mijn doel is om deze structuur in html hebben met dezelfde array:

<div *ngFor='let calendarDate of calendarDates'>
  <div class='month'>
    <div class='october'>
      <p>{{getMonthName}}</p>
      <div class='date'>{{calendarDate.date}} (2018-10-23)</div>
      <div class='date'>{{calendarDate.date}} (2018-10-24)</div>
      ...
    </div>
    <div class='november'>
      <p>{{getMonthName}}</p>
      <div class='date'>{{calendarDate.date}} (2018-11-01)</div>
      ...
    </div>
    <div class='february'>
      <p>{{getMonthName}}</p>
      <div class='date'>{{calendarDate.date}} (2019-02-01)</div>
      ...
    </div>
  </div>
</div>

Ik kan niet achterhalen hoe ik het en wat is de beste manier om de data gecategoriseerd kan filteren maanden in de html zelf en wikkel de data om de maand div.

Hoe kan ik de maand wrappers in ngIf creëren? De waarden kunnen dan veranderen tijdens de interactie zoals prijs of date_is_valid dus het moet aan dezelfde bron.

De vraag is gesteld op 08/11/2018 om 00:07
bron van user
In andere talen...                            


1 antwoorden

stemmen
2

U kunt dit doen door het creëren van een pijp te categoriseren.

pijp

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({name: 'groupBy'})
export class GroupByPipe implements PipeTransform {
    transform(collection: Array, property: string): Array {
        if(!collection) {
            return null;
        }

        const groupedCollection = collection.reduce((previous, current)=> {
            if(!previous[current[property]]) {
                previous[current[property]] = [current];
            } else {
                previous[current[property]].push(current);
            }

            return previous;
        }, {});

        return Object.keys(groupedCollection).map(key => ({ key, value: groupedCollection[key] }));
    }
}

onder meer over deze pijp, bezoeken http://www.competa.com/blog/custom-groupby-pipe-angular-4

html

<div *ngFor='let calendarDatesByMonth of calendarDates | groupBy:'month''>
  <div class='month >
    <div class='october'>
      <p>{{getMonthName(calendarDatesByMonth.key)}}</p> <!-- calendarDatesByMonth.key is month number -->
      <div *ngFor='let calendarDate of calendarDatesByMonth.value'  class='date'>{{calendarDate.date}} (2018-10-23)</div>
    </div>
  </div>
</div>
antwoordde op 08/11/2018 om 00:38
bron van user

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more