Angular изменить состояние вместо добавления

Question

Изменение состояния приводит к странному поведению, изменение добавляется к состоянию вместо его перезаписи.

При нажатии на определенную дату я хочу, чтобы предыдущий выбор исчез и выделил вместо него текущий выбор.

calendar-day.component. html

<div (click)="setClickedDay(day.date.getUTCDate())">
  <p>{{ dayNames[day.date.getDay()] }}</p>
  <p [ngClass]="setDayClass(day.date.getUTCDate())">{{ day.date.getDate() }}</p>
  <p>{{ day.quantity }}</p>
  <span [ngClass]="setDotClass()"></span>
</div>

calendar-day.component.ts

import { Component, OnInit, Input } from '@angular/core'
import { CalendarDay } from 'src/app/models/CalendarDay'

@Component({
  selector: 'app-calendar-day',
  templateUrl: './calendar-day.component.html',
  styleUrls: ['./calendar-day.component.scss'],
})
export class CalendarDayComponent implements OnInit {
  @Input() day: CalendarDay

  dayNames: Array<String> = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
  clickedDay: number

  constructor() {}

  ngOnInit(): void {

      console.warn(this.clickedDay)

  }

  setDotClass(): object {
    let classes = {
      dot: true,
      redDot: this.day.isRejected,
      greenDot: this.day.isApproved,
      greyDot: !this.day.isRejected && this.day.isApproved,
      noDot: !this.day.tasksCount,
    }

    return classes
  }

  setDayClass(x:any): object {
    let currentDate = new Date()
    let classes = {
      selectedDay: x + 1 === this.clickedDay,
      today: this.day.date.getDate() === currentDate.getUTCDate(),
    }

    return classes
  }

  setClickedDay(x: any): void {
    if (this.clickedDay !== x + 1) {
      this.clickedDay = x + 1
    } else this.clickedDay = 0
    console.log(this.clickedDay)
  }
}

CodeSandbox: https://codesandbox.io/s/zen-brook-l6kv3

Answer 1

Это поведение, которое вы ищете? то, что я вижу, поведение странное, потому что ваши clickedDay управляются CalendarDayComponent сами, поэтому, когда вы нажимаете другой, предыдущий день все еще выделяется. Я думаю, что лучше, когда на ваш CalendarDayComponent нажимают и передают значение родительскому элементу, а родитель сообщает всему ребенку, какой день нажимается.

CodeSandbox: https://codesandbox.io/s/crazy-almeida-qfqtf