*ngFor и @for декоратор ввода и замыкание приведения

У меня разные уровни закрытия, используя директиву *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.

Я надеюсь, что смогу получить некоторую ясность относительно того, почему это происходит?

поделитесь, пожалуйста, кодом функции toggle! пожалуйста, обновите вопрос и этот stackblitz с помощью минимального воспроизводимого примера кода! где происходит проблема!

Naren Murali 22.04.2024 08:12
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
1
92
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

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

Я думаю, что в *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>
 }

Я хотел бы пометить этот ответ как принятый. Не могли бы вы обновить свой ответ, чтобы вместо этого отслеживать активную проблему. В этом была проблема.

sridawg 23.04.2024 17:54

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