У меня разные уровни закрытия, используя директиву *ngFor и новый блок @for. У меня есть родительский компонент, который создает несколько дочерних компонентов с помощью цикла for:
<app-active-problem class = "panel" *ngFor = "let activeProblem of summary.activeProblems" [activeProblem] = "activeProblem" (update) = "updateActiveProblem($event);"></app-active-problem>
<!--
@for (activeProblem of summary.activeProblems; track $index) {
<app-active-problem class = "panel" [activeProblem] = "activeProblem" (update) = "updateActiveProblem($event);"></app-active-problem>
}-->
</ng-container>
В дочернем компоненте я принимаю входные данные [activeProblem] как IssueGroup | Класс NarrativeProblem. Чтобы эффективно различать эти два понятия и визуализировать представление. Я создаю две переменные экземпляра
problemGroup?: ProblemGroup;
narrativeProblem?: NarrativeProblem;
ngOnInit(): void {
if (this.activeProblem instanceof ProblemGroup) {
this.problemGroup = this.activeProblem as ProblemGroup;
} else {
this.narrativeProblem = this.activeProblem;
}
}
В этом же представлении у меня есть обработчик событий щелчка, который переключает значение в проблемной группе (по сути изменяя объект).
<input
clrCheckbox
type = "checkbox"
[checked] = "p.value"
(change) = "toggle($event, $index)"
/>
Если я визуализировал дочерний компонент с помощью @for при назначении activeProblem группе проблем, он теряет ссылку, фактически создавая копию объекта. Таким образом, любые мутации, которые я делаю в дочернем компоненте, не отражаются в исходном объекте.
Если я отрисовал дочерний компонент с помощью директивы *ngFor, то он работает так, как ожидалось, любые мутации, которые я делаю в проблемной группе, фактически указывают на activeProblem.
Я надеюсь, что смогу получить некоторую ясность относительно того, почему это происходит?
Я думаю, что в *ngFor
вы раньше не использовали функцию trackBy
, верно? В angular 17, когда вы используете @for
, вам необходимо установить функцию track
, которая аналогична функции trackBy
в старой версии angular. Я вижу, что в вашем коде вы установили значение track $index
, что означает, что Angular всегда считает, что это один и тот же элемент, и никогда не меняется. Чтобы решить эту проблему, вам следует изменить функцию track
на что-то вроде track activeProblem
.
В качестве примера:
@for (activeProblem of summary.activeProblems; track activeProblem) {
<app-active-problem class = "panel" [activeProblem] = "activeProblem" (update) = "updateActiveProblem($event);"></app-active-problem>
}
Я хотел бы пометить этот ответ как принятый. Не могли бы вы обновить свой ответ, чтобы вместо этого отслеживать активную проблему. В этом была проблема.
поделитесь, пожалуйста, кодом функции
toggle
! пожалуйста, обновите вопрос и этот stackblitz с помощью минимального воспроизводимого примера кода! где происходит проблема!