Discussion :

[angie13003]

Bonjour,

Je suis en train de faire de la mise en forme sur mon projet et je ne comprend pas un truc. J'ai mis deux controleurs de paginations sur la même page, où je leu ai bien attribué un id sur chaque afin qu'il puisse contrôlé uniquement ce que le concerne mais cela ne fonctionne pas. Puisque les deux contrôleur change tout à chaque fois.

Voici mon code

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
      </div class="col-6 text-center" >
        <div class="row">
          <h3 class="text-center m-auto mb-4">Créneau de prise en charge</h3>
        </div>
        <div class="row">
          <pagination-controls id='pagination1' class="hide-page-numbers m-auto" (pageChange)="p = $event" previousLabel="prec" nextLabel="suiv"></pagination-controls>
        </div>
        <div class="row">
          <div class="col-4 m-auto text-center"*ngFor="let hoursBooking of hoursBookings | paginate: { id: 'pagination1', itemsPerPage: 3, currentPage: p }">
            <p class="hoursBooking">{{ hoursBooking.datebookingCalendar }}</p>
          </div>
        </div>
        <div class="row">
          <div class="col-4 m-auto text-center" *ngFor="let hoursBooking of hoursBookings | paginate: { id: 'pagination1', itemsPerPage: 3, currentPage: p }">
            <div class="radio-group">
              <input name="hoursForth" type="radio" [value]="hoursBooking.h1bookingCalendar" id="h1Forth-{{hoursBooking.idBookingCalendar}}" class="validate m-auto hoursBookingRadio" formControlName="hoursForth" [ngClass]="{'d-none': hoursBooking.h1bookingCalendar === 'pris'}">
              <label class="hoursBookingLabel" for="h1Forth-{{hoursBooking.idBookingCalendar}}" [ngClass]="{'d-none': hoursBooking.h1bookingCalendar === 'pris'}">07:30</label>
              <input name="hoursForth" type="radio" [value]="hoursBooking.h2bookingCalendar" id="h2Forth-{{hoursBooking.idBookingCalendar}}" class="validate m-auto hoursBookingRadio" formControlName="hoursForth" [ngClass]="{'d-none': hoursBooking.h2bookingCalendar === 'pris'}">
              <label class="hoursBookingLabel" for="h2Forth-{{hoursBooking.idBookingCalendar}}" [ngClass]="{'d-none': hoursBooking.h2bookingCalendar === 'pris'}">08:30</label>
              <input name="hoursForth" type="radio" [value]="hoursBooking.h3bookingCalendar" id="h3Forth-{{hoursBooking.idBookingCalendar}}" class="validate m-auto hoursBookingRadio" formControlName="hoursForth" [ngClass]="{'d-none': hoursBooking.h3bookingCalendar === 'pris'}">
              <label class="hoursBookingLabel" for="h3Forth-{{hoursBooking.idBookingCalendar}}" [ngClass]="{'d-none': hoursBooking.h3bookingCalendar === 'pris'}">09:30</label>
              <input name="hoursForth" type="radio" [value]="hoursBooking.h4bookingCalendar" id="h4Forth-{{hoursBooking.idBookingCalendar}}" class="validate m-auto hoursBookingRadio" formControlName="hoursForth" [ngClass]="{'d-none': hoursBooking.h4bookingCalendar === 'pris'}">
              <label class="hoursBookingLabel" for="h4Forth-{{hoursBooking.idBookingCalendar}}" [ngClass]="{'d-none': hoursBooking.h4bookingCalendar === 'pris'}">10:30</label>
              <input name="hoursForth" type="radio" [value]="hoursBooking.h5bookingCalendar" id="h5Forth-{{hoursBooking.idBookingCalendar}}" class="validate m-auto hoursBookingRadio" formControlName="hoursForth" [ngClass]="{'d-none': hoursBooking.h5bookingCalendar === 'pris'}">
              <label class="hoursBookingLabel" for="h5Forth-{{hoursBooking.idBookingCalendar}}" [ngClass]="{'d-none': hoursBooking.h5bookingCalendar === 'pris'}">11:30</label>
              <input name="hoursForth" type="radio" [value]="hoursBooking.h6bookingCalendar" id="h6Forth-{{hoursBooking.idBookingCalendar}}" class="validate m-auto hoursBookingRadio" formControlName="hoursForth" [ngClass]="{'d-none': hoursBooking.h6bookingCalendar === 'pris'}">
              <label class="hoursBookingLabel" for="h6Forth-{{hoursBooking.idBookingCalendar}}" [ngClass]="{'d-none': hoursBooking.h6bookingCalendar === 'pris'}">13:30</label>
              <input name="hoursForth" type="radio" [value]="hoursBooking.h7bookingCalendar" id="h7Forth-{{hoursBooking.idBookingCalendar}}" class="validate m-auto hoursBookingRadio" formControlName="hoursForth" [ngClass]="{'d-none': hoursBooking.h7bookingCalendar === 'pris'}">
              <label class="hoursBookingLabel" for="h7Forth-{{hoursBooking.idBookingCalendar}}" [ngClass]="{'d-none': hoursBooking.h7bookingCalendar === 'pris'}">14:30</label>
              <input name="hoursForth" type="radio" [value]="hoursBooking.h8bookingCalendar" id="h8Forth-{{hoursBooking.idBookingCalendar}}" class="validate m-auto hoursBookingRadio" formControlName="hoursForth" [ngClass]="{'d-none': hoursBooking.h8bookingCalendar === 'pris'}">
              <label class="hoursBookingLabel" for="h8Forth-{{hoursBooking.idBookingCalendar}}" [ngClass]="{'d-none': hoursBooking.h8bookingCalendar === 'pris'}">15:30</label>
              <input name="hoursForth" type="radio" [value]="hoursBooking.h9bookingCalendar" id="h9Forth-{{hoursBooking.idBookingCalendar}}" class="validate m-auto hoursBookingRadio" formControlName="hoursForth" [ngClass]="{'d-none': hoursBooking.h9bookingCalendar === 'pris'}">
              <label class="hoursBookingLabel" for="h9Forth-{{hoursBooking.idBookingCalendar}}" [ngClass]="{'d-none': hoursBooking.h9bookingCalendar === 'pris'}">16:30</label>
              <input name="hoursForth" type="radio" [value]="hoursBooking.h10bookingCalendar" id="h10Forth-{{hoursBooking.idBookingCalendar}}" class="validate m-auto hoursBookingRadio" formControlName="hoursForth" [ngClass]="{'d-none': hoursBooking.h10bookingCalendar === 'pris'}">
              <label class="hoursBookingLabel" for="h10Forth-{{hoursBooking.idBookingCalendar}}" [ngClass]="{'d-none': hoursBooking.h10bookingCalendar === 'pris'}">17:30</label>
              <input name="hoursForth" type="radio" [value]="hoursBooking.h11bookingCalendar" id="h11Forth-{{hoursBooking.idBookingCalendar}}" class="validate m-auto hoursBookingRadio" formControlName="hoursForth" [ngClass]="{'d-none': hoursBooking.h11bookingCalendar === 'pris'}">
              <label class="hoursBookingLabel" for="h11Forth-{{hoursBooking.idBookingCalendar}}" [ngClass]="{'d-none': hoursBooking.h11bookingCalendar === 'pris'}">18:30</label>
            </div>
          </div>
        </div>
 
        <div class="row sepHoursBooking">
          <h3 class="text-center m-auto">Créneau de restitution</h3>
        </div>
        <div class="row">
          <pagination-controls id='pagination2' class="hide-page-numbers m-auto" (pageChange)="p = $event" previousLabel="prec" nextLabel="suiv"></pagination-controls>
        </div>
        <div class="row">
          <div class="col-4 m-auto text-center"*ngFor="let hoursBooking of hoursBookings | paginate: { id: 'pagination2', itemsPerPage: 3, currentPage: p }">
            <p class="hoursBooking">{{ hoursBooking.datebookingCalendar }}</p>
          </div>
        </div>
 
      </div>

Je ne pense qu'il y a un truc de la doc que j'ai du mal comprendre.

[krakatoa]

essaye de mettre p2 pour currentpage !

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9

     <div class="col-4 m-auto text-center"*ngFor="let hoursBooking of hoursBookings | paginate: { id: 'pagination2', itemsPerPage: 3, currentPage: p2 }">



...
...
  p2: number = 1;

[angie13003]

super effectivement j'avais pas bien compris la doc