Я использую 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 нет никаких предупреждений. Тем не менее, я сталкиваюсь с предупреждением локально. Если я проигнорирую это предупреждение, может ли это вызвать какие-либо проблемы?
попробуйте проверить трассировку стека ошибок, чтобы определить, связана ли ошибка с кодом, которым вы поделились, или где-то еще в вашем приложении.
Вы имеете в виду проверить другие компоненты, связанные с компонентом календаря, верно?
да, ошибка будет содержать точное место возникновения проблемы, вам нужно проверить трассировку стека в консоли разработчика.
Это предупреждение, оно не блокирует ваше развитие.
В основном это связано с проблемой в пакете, а не с кодом, который вы написали для реализации.
Сообщения на красном фоне — это важные ошибки, которые необходимо исправить, но поскольку это происходит на уровне библиотеки, вы можете игнорировать это и продолжить разработку.
Короче говоря, это не связано с отслеживанием структурных директив, как в жалобе на предупреждение, верно?
@JarMoo Да, это предупреждение об оптимизации, оно не нарушает код и его можно игнорировать.
проблема не воспроизводится stackblitz