Блог

У меня есть кнопка, и я хотел бы изменить значение элемента div, но увеличивать (или уменьшать) дату каждый раз, нажимая на кнопку. Код приведен ниже:

 <div mat-dialog-title class="section-title container">
  <app-sizer [date]="today" (newDate)="today=$event"></app-sizer>
</div>
  

и в компоненте app-sizer у меня есть :

 import {Component, Input, Output, EventEmitter, OnInit} from '@angular/core';

@Component({
  selector: 'app-sizer',
  template: `
    <div mat-dialog-title class="section-title container">
    <div class="f-desktop-available f-desktop-available-flat">
      <div class="f-desktop-available-inner">
        <div class="f-desktop-available-days">
          <div class="available-pagination">
            <div (click)="decrement()">
              <svg class="available-pagination-arrow">
                <path
                  d="M6.7.5c.2-.3.5-.5 1-.5s.8.2 1.2.5c.5.6.5 1.4 0 2.2L3.5 8 9 13.5c.6.8.6 1.5 0 2.2-.4.3-.8.4-1.3.4-.4 0-.8 0-1-.3L.4 9C0 9 0 8.6 0 8c0-.4 0-.8.4-1L6.7.5z"></path>
              </svg>
            </div>
          </div>

          <div class="available-day">
            <div class="available-day-title">
              <div class="available-day-name" >{{date | date:'EEEE'}}</div>
              <div class="available-day-date">{{date | date:'d MMM'}}</div>
            </div>
            <div class="available-slots">
              <div class="available-empty-slot">
                <div class="available-empty-slot-dash"></div>
              </div>
              <div class="available-slot">
                10:15
              </div>
              <div class="available-slot">
                10:30
              </div>
              <div class="available-slot">
                10:45
              </div>
            </div>
          </div>
          <div class="available-day">
          <div class="available-pagination">
            <div (click)="increment()">
              <svg class="available-pagination-arrow">
                <path
                  d="M2.7.5c-.2-.3-.5-.5-1-.5S1 .2.5.5C-.2 1-.2 2 .5 2.7L5.7 8 .5 13.5c-.7.8-.7 1.5 0 2.2.3.3.7.4 1.2.4.4 0 .8 0 1-.3L9 9c.3-.2.4-.5.4-1 0-.4 0-.8-.4-1L2.7.5z"></path>
              </svg>
            </div>
          </div>
        </div>
        <div class="f-desktop-available-header-border"></div>

        <div class="justify-center"><a
          class="f-button-info f-button"
        ><span class="f-button-label">Valider rendez-vous</span></a>
        </div>
      </div>
    </div>
    </div>
  `,
  styleUrls: ['./calendar-dialog.component.scss']
})
export class CalendarWeekViewHeaderComponent {
  @Input()  date: Date;
  @Output() newDate = new EventEmitter();

  decrement() {
    this.date.setDate(this.date.getDate() - 1);
    this.newDate.emit(this.date);
  }
  increment() {
    this.date.setDate(this.date.getDate()   1);
    console.log('test,', this.date);
    this.newDate.emit(this.date);
  }

}
  

Я пытался сделать то же самое, увеличивая числа, это работает, но у меня проблема с датами.

Я рекомендую не использовать отдельное событие, рассмотрите возможность использования двухсторонней привязки. (https://angular.io/guide/two-way-binding )

 <div mat-dialog-title class="section-title container">
  <app-sizer [(date)]="today"></app-sizer>
</div>
  

 export class CalendarWeekViewHeaderComponent {
  @Input()  date: Date;
  @Output() dateChange= new EventEmitter(); // the name matters

  decrement() {
    this.date.setDate(this.date.getDate() - 1);
    this.dateChange.emit(this.date);
  }
  increment() {
    this.date.setDate(this.date.getDate()   1);
    this.dateChange.emit(this.date);
  }
}