Сложный объект Сервиса изменяется из компонента после возврата из сервисной функции в угловую 5

Question

Более подробно прорабатывая мой вопрос,

У меня есть служба с именем hero.service.ts, которая используется в компоненте с именем hero.component.ts.hero.service.ts содержит переменную heros, которая является array и содержит много элементов.

Я получаю значения heros из hero.service.ts с помощью функции с именем getHeroes(), которая возвращает переменную какreturn this.heros; и получение значений для компонента this.heros = this.heroService.getHeroes().

В моем компоненте перечисление героев есть в таблице. Когда я удаляю строки из таблицы, он фактически удаляет и из переменной heros из hero.service.ts.

• почему это происходит?
• Почему это так?вместо этого возвращая ссылку на переменную, просто значения.

К вашему сведению, я достиг этого, вернув heros с ... оператором расширения, например return [...this.heros];.Но почему сервис передает ссылку на переменную.помогите пожалуйста ребята.

Answer 1

В JavaScript сложные типы данных, такие как массивы и объекты, передаются по ссылке, а не по значению.

Когда вы вернули this.heros; из своего сервиса, ваш компонент не получил массив героев.Он получил ссылку на массив героев в памяти.

Таким образом, на этом этапе оба свойства героев в вашем Компоненте, а также в Сервисе, указывали на один и тот же Массив в памяти.

Чтобы исправить это, когда вы сделали return [...this.heros];, на этот раз он распространил элементы массива героев в новый массив, созданный на лету, а затем вернул ссылку на этот вновь созданный массив в ваш компонент.

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

Вот StackBlitz для вашегоисх.