Угловой не обнаружит изменения для эталонного объекта при использовании массива введенного сервиса для angular-calendar - PullRequest
Новая
       20

Угловой не обнаружит изменения для эталонного объекта при использовании массива введенного сервиса для angular-calendar

1 голос
/ 08 марта 2019

Итак, я использую angular-calendar и у меня есть диалоговое окно, когда я нажимаю кнопку, сейчас я добавляю объект случайного события в свой массив событий calendarservice для целей тестирования: 

 onButtonClick() {
      var date = addHours(new Date(), 2)
      this.calendarService.onCreateEvent('test added',date )
      console.log(date)
    }

, который добавляетэто к моей внедренной службе: 

export class CalendarService {
  events: CalendarEvent[] = [
    { title: "my test event 1", start: new Date() },
    { title: "my test event 2", start: addDays(new Date(), 1) }
  ];

Прямо сейчас я использую ngOnit для установки массива локальных событий в компоненте: 

export class ScheduleCalendarComponent implements OnInit{
  constructor(
    private calendarService: CalendarService,
    public dialog: MatDialog
  ) {}

  view: string = "month";

  viewDate: Date = new Date();

  events: CalendarEvent[] = [];

  refresh: Subject<any> = new Subject();

  ngOnInit(): void {
    this.events = this.calendarService.events;
  }

Так что сейчас он вытягивает правильные события, но когда ядобавить событие, которое не обновляет DOM, потому что я обновляю только массив OnInit, поэтому только после смены страниц и возвращения, используя массив событий calendarservice, он работает, если я меняю метод обновления: 

  onCreateEvent(title: string, start: any) {
    this.events = [...this.events, {title: title, start: start}]
  }

Я использую этои добавьте его в календарь следующим образом: 

 <mwl-calendar-day-view
    *ngSwitchCase="'day'"
    [viewDate]="viewDate"
    [events]="this.calendarService.events"
    (hourSegmentClicked)="openDialog()"
  >
  </mwl-calendar-day-view>

но как мне сделать это, используя собственный массив компонентов, а не массив служб?И лучше ли для компонента использовать свой собственный массив, как это сделал max, а не просто брать прямо из сервиса?

Я бы хотел сделать это, используя массив компонентов, но он не будет обновляться при нажатии кнопки: 

 <mwl-calendar-day-view
    *ngSwitchCase="'day'"
    [viewDate]="viewDate"
    [events]="events"
    (hourSegmentClicked)="openDialog()"
  >
  </mwl-calendar-day-view>

Надеюсь, что это имеет смысл

Спасибо вам!

1 Ответ

0 голосов
/ 08 марта 2019

Это происходит потому, что есть разные changeDetectionStrategy , и тот, который вы видите, changeDetectionStrategy.onPush ниже @Component

changeDetection: ChangeDetectionStrategy.OnPush

Почему бы вам не создать новую копию массива, используя 

ngOnInit(): void {
  this.events = [...this.calendarService.events];
}

OR 

ngOnInit(): void {
  this.events = JSON.parse(JSON.stringify(this.calendarService.events));
}

и тогда вы не измените массив служб events и сможете легко использовать: 

onCreateEvent(title: string, start: any) {
 this.events = [...this.events, {title: title, start: start}]
}
...