Блог

У меня есть метод обслуживания, как показано на рисунке:

 import { Injectable } from '@angular/core'; import { of } from 'rxjs'; import Employee from '../model/employee';  @Injectable({  providedIn: 'root' }) export class DataService {   employees : Employee[] = [{  fName : 'Sam',  lName : 'Johnson',  age : 32,  country : 'USA'  },{  fName : 'Raghav',  lName : 'Sharma',  age : 30,  country : 'India'  }];   constructor() { }   getEmployees(){  return of(this.employees);  }   addEmployee(employee : Employee){  this.employees.push(employee);  return of({  status : 200,  message : "Data inserted"  })  }  }  

Я подписываюсь getEmployees на компонент A.

 getEmployees(){  this.sub = this.service.getEmployees().subscribe((response) =gt; {  this.allEmployees = response;  })  }  

Компонент B обновляет массив услуг employees с помощью метода addEmployee . Каждый раз, когда он обновляет массив employees , компонент переменной allEmployees получает обновления. Почему??

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

Попробуйте вместо этого сделать следующее, которое вернет копию массива:

 getEmployees(){  return of([...this.employees]);  }  

Поскольку this.employees.push(employee); в процессе обслуживания изменяется массив сотрудников, поэтому он запускает наблюдателя GetEmployees в компоненте A