Предмет и наблюдаемый в Angular

Question

Я изучаю angular, и я немного зациклился на наблюдаемых и предметах. У меня есть служба, которая будет генерировать массив строк из HTTP-запроса в первый раз, когда приложение загружается, и он просто будет выдавать сохраненные данные.

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Subject, Observable } from 'rxjs';
import { map } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class Service1Service {

  persons: string[];
  pesonChanged = new Subject<string[]>();
  isFirst= true;

  fetchPersons() {
    if(this.isFirst){
      this.http.get<any>('https://swapi.dev/api/people')
      .pipe(map(resData => {
        return resData.results.map(character => character.name);
      }))
      .subscribe(transformedData => {
        this.persons = transformedData;
        this.pesonChanged.next(transformedData);
      });
      this.isFirst = false;
    } else {
        this.pesonChanged.next(this.persons);
    }
  }

  addPerson(name: string) {
    this.persons.push(name);
    this.pesonChanged.next(this.persons);
  }

  removePerson(name: string){
    this.persons = this.persons.filter(person => {
      return person !== name;
    });
    this.pesonChanged.next(this.persons);
  }
  constructor(
    private http: HttpClient
  ) { }
}

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

import { Service1Service } from './service1.service';
import { Component, OnInit, Output, EventEmitter, OnChanges, OnDestroy } from '@angular/core';
import { Input, ChangeDetectorRef, SimpleChanges } from '@angular/core';
import { HttpRequest, HttpClient } from '@angular/common/http';
import { ActivatedRoute, Router } from '@angular/router';
import { animation, transition } from '@angular/animations';
import { trigger, state, style, animate } from '@angular/animations';
import { Subscription } from 'rxjs';
import { timeout } from 'rxjs/operators';



@Component({
  selector: 'app-mdl',
  template: `
    <p *ngIf="isFetching">Loading...</p>
    <ul *ngIf="!isFetching">
      <li *ngFor="let p of personList" (click)="onRemove(p)">
        {{p}}
      </li>
    </ul>

  `,
  styles: [
  ],
  styleUrls: ['./animated-button.component.css'],
  animations: [

  ]
})
export class MdlComponent implements OnInit, OnChanges, OnDestroy{
personList: string[];
personListSubs: Subscription;
isFetching = true;
prova: any;

constructor(
  private myService: Service1Service
) {
}
ngOnInit(): void {
  if(this.myService.isFirst){
    this.myService.fetchPersons();
    this.personListSubs = this.myService.pesonChanged.subscribe(persons => {
      this.personList = persons;
      this.isFetching = false;
    });
  } else {
    this.myService.fetchPersons();
    this.personListSubs = this.myService.pesonChanged.subscribe(persons => {
      this.personList = persons;
      this.isFetching = false;
    });
  }
}
onRemove(p: string) {
  this.myService.removePerson(p);
}
ngOnChanges(changes: SimpleChanges): void {
}
ngOnDestroy() {
  this.personListSubs.unsubscribe();
}
}

Что я делаю не так?