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

这是您寻找的行为吗？我看到的行为很奇怪，因为您的@OneToMany(mappedBy = "address") var persons: MutableList<PersonAddress> = mutableListOf()是自己管理的clickedDay，这就是为什么当您单击另一天前一天仍然突出显示时的原因。我认为当您的CalendarDayComponent被点击并向父母发送价值并且父母告诉所有孩子点击哪一天会更好。

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

角度变化状态，而不是附加

1 个答案: