Предупреждение Angular Calendar: NG0956 — отслеживание по идентификатору приводило к повторному созданию всей коллекции

Я использую nz-calendar от ng-zorro-antd в своем приложении Angular. Каждый раз, когда я нажимаю на дату в календаре, я получаю в консоли следующее предупреждение:

NG0956: настроенное выражение отслеживания (отслеживание по идентификатору) вызвало повторное создание всей коллекции размером 7. Это дорогостоящая операция, требующая уничтожения и последующего создания узлов DOM, директив, компонентов и т. д. Просмотрите «выражение отслеживания» и убедитесь, что он однозначно идентифицирует элементы в коллекции. Дополнительную информацию можно найти на сайте https://angular.dev/errors/NG0956.

Мой HTML:

<nz-calendar [nzFullscreen] = "false" [(ngModel)] = "currentDate" [nzCustomHeader] = "customHeader"
  (nzSelectChange) = "onDateChange($event)" nzTooltipVisible = "false">
  <div class = "dot" *nzDateCell = "let date;" style = "list-style: none;">
    <nz-badge *ngIf = "isSelected(date)" nzStatus = "warning"></nz-badge>
  </div>
</nz-calendar>

Компонент:

currentDate: Date = this.calendarService.getCurrentDate();
selectedDates: Set<string> = new Set<string>();

isSelected(date: Date): boolean {
    const formattedDate = date.toISOString();
    const isMatched = this.selectedDates.has(formattedDate);

    return isMatched;
}

onDateChange(newDate: Date): void {
  console.info('newDate :>> ', newDate);
  this.calendarService.setCurrentDate(newDate);
}

updateSelectedDates(data: any): void {
  this.selectedDates.clear();
  data.forEach((appointment: any) => {
    const appointmentDate = new Date(appointment.appointment_date);
    appointmentDate.setHours(0, 0, 0, 0);
    this.selectedDates.add(appointmentDate.toISOString());
  });
  this.cdr.markForCheck();
}

Услуга:

private currentDate = new BehaviorSubject<Date>(new Date());

getCurrentDate(): Date {
  return this.currentDate.value;
}

Зависимости:

"dependencies": {
  "@angular/animations": "^18.0.0",
  "@angular/cdk": "^18.0.6",
  "@angular/common": "^18.0.0",
  "@angular/compiler": "^18.0.0",
  "@angular/core": "^18.0.0",
  "@angular/forms": "^18.0.0",
  "@angular/material": "^18.0.6",
  "@angular/platform-browser": "^18.0.0",
  "@angular/platform-browser-dynamic": "^18.0.0",
  "@angular/router": "^18.0.0",
  "ng-zorro-antd": "^18.0.1",
  "ngx-perfect-scrollbar": "^10.1.1",
  "ngx-scrollbar": "^15.1.2",
  "rxjs": "~7.8.0",
  "socket.io-client": "^4.7.5",
  "tslib": "^2.3.0",
  "zone.js": "~0.14.3"

 "devDependencies": {
    "@angular-devkit/build-angular": "^18.0.7",
    "@angular/cli": "^18.0.7",
    "@angular/compiler-cli": "^18.0.0",
    "@types/jasmine": "~5.1.0",
    "jasmine-core": "~5.1.0",
    "karma": "~6.4.0",
    "karma-chrome-launcher": "~3.2.0",
    "karma-coverage": "~2.2.0",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "~2.1.0",
    "typescript": "~5.4.2"
  }
}

Проблема: Я подозреваю, что предупреждение связано с тем, как Angular отслеживает элементы nzDateCell, вызывая повторное создание узлов DOM, когда я нажимаю на дату. Я пробовал использовать trackBy, но не знаю, как реализовать это с помощью nzDateCell.

Вопрос: Как я могу правильно использовать trackBy с nzDateCell или иным образом решить эту проблему, чтобы избежать повторного создания всей коллекции каждый раз при нажатии даты?

проблема не воспроизводится stackblitz

Naren Murali 02.09.2024 11:31

Я полностью обновил код и был удивлен, увидев, что при использовании StackBlitz нет никаких предупреждений. Тем не менее, я сталкиваюсь с предупреждением локально. Если я проигнорирую это предупреждение, может ли это вызвать какие-либо проблемы?

JarMoo 02.09.2024 12:53

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

Naren Murali 02.09.2024 12:55

Вы имеете в виду проверить другие компоненты, связанные с компонентом календаря, верно?

JarMoo 02.09.2024 13:06

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

Naren Murali 02.09.2024 13:15
ссылка Это предупреждение появляется каждый раз, когда вы выбираете дату в календаре или нажимаете кнопку «Далее» или «Предыдущее» в приложении.
JarMoo 02.09.2024 13:34
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Angular и React для вашего проекта веб-разработки?
Angular и React для вашего проекта веб-разработки?
Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.
Угловой продивер
Угловой продивер
Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.
Мое недавнее углубление в Angular
Мое недавнее углубление в Angular
Недавно я провел некоторое время, изучая фреймворк Angular, и я хотел поделиться своим опытом со всеми вами. Как человек, который любит глубоко...
Освоение Observables и Subjects в Rxjs:
Освоение Observables и Subjects в Rxjs:
Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular
1
6
51
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Это предупреждение, оно не блокирует ваше развитие.

В основном это связано с проблемой в пакете, а не с кодом, который вы написали для реализации.

Сообщения на красном фоне — это важные ошибки, которые необходимо исправить, но поскольку это происходит на уровне библиотеки, вы можете игнорировать это и продолжить разработку.

Короче говоря, это не связано с отслеживанием структурных директив, как в жалобе на предупреждение, верно?

JarMoo 02.09.2024 13:59

@JarMoo Да, это предупреждение об оптимизации, оно не нарушает код и его можно игнорировать.

Naren Murali 02.09.2024 14:08

Другие вопросы по теме