ngFor πώς να τυλίξετε τιμές σε div δοχεία που βασίζεται σε βασικές τιμές

ψήφοι
0

Έχω αυτό το φάσμα της γωνιακής εφαρμογή μου

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}
]

Στόχος μου είναι να έχουμε αυτή τη δομή σε html χρησιμοποιώντας την ίδια σειρά:

<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>

Δεν μπορώ να καταλάβω πώς θα μπορούσε αυτό και ποιος είναι ο καλύτερος τρόπος για να κατηγοριοποιηθούν τις ημερομηνίες φίλτρο από μήνες στην ίδια την HTML και τυλίξτε τις ημερομηνίες για το μήνα div.

Πώς μπορώ να δημιουργήσω τα περιτυλίγματα μήνα ngIf; Οι τιμές στη συνέχεια μπορεί να αλλάξει κατά τη διάρκεια της αλληλεπίδρασης, όπως τιμή ή date_is_valid γι 'αυτό πρέπει να είναι η ίδια πηγή.

Δημοσιεύθηκε 08/11/2018 στις 00:07
πηγή χρήστη
Σε άλλες γλώσσες...                            


1 απαντήσεις

ψήφοι
2

Μπορείτε να το κάνετε δημιουργώντας ένα σωλήνα για την κατηγοριοποίηση.

σωλήνας

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] }));
    }
}

στο σημείο περισσότερα για αυτό το σωλήνα, επισκεφθείτε 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>
Απαντήθηκε 08/11/2018 στις 00:38
πηγή χρήστη

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