Данные не обновляются должным образом в угловой таблице материалов на вкладке материала

Question

Я слежу за видеоруководством по созданию приложения менеджера контактов по Angular Material Design, которое было разработано для версии 5 Angular и Angular Material, но я использую Angular 7.0.4 и Material 7.2.0.

Я реализую вкладки «Материал» с двумя вкладками, отделяющими биографию контактов от заметок для этих контактов. Первая вкладка правильно отображает правильную биографию для каждой, но вторая вкладка, вкладка «Примечания», не обновляется. На второй вкладке будут храниться заметки о последнем контакте, когда браузер обновлялся независимо от того, какой контакт отображается. Поскольку по умолчанию используется первый контакт, примечания первого контакта отображаются для каждого контакта. Примечания.

Смена контакта и био контролируется следующим компонентом SidNav:

sidenav.component.ts

import { Component, OnInit, NgZone, ViewChild } from '@angular/core';
import { UserService } from '../../services/user.service';
import { Observable } from 'rxjs/Observable';
import { User } from '../../models/user';
import { Router } from '@angular/router';
import { MatSidenav } from '@angular/material';

const SMALL_WIDTH_BREAKPOINT = 720;

@Component({
  selector: 'app-sidenav',
  templateUrl: './sidenav.component.html',
  styleUrls: ['./sidenav.component.scss']
})
export class SidenavComponent implements OnInit {

  private mediaMatcher: MediaQueryList =
    matchMedia(`(max-width: ${SMALL_WIDTH_BREAKPOINT}px)`);

    users: Observable<User[]>;

  constructor(
    zone: NgZone,
    private userService: UserService,
    private router: Router) {
    this.mediaMatcher.addListener(mql =>
    zone.run(() => this.mediaMatcher = matchMedia(`(max-width: ${SMALL_WIDTH_BREAKPOINT}px)`)));
  }

  @ViewChild(MatSidenav) sidenav: MatSidenav;

  ngOnInit() {
    this.users = this.userService.users;
    this.userService.loadAll();

    this.users.subscribe(data => {
      if (data.length > 0) this.router.navigate(['contactmanager', data[0].id]);
    });

    this.router.events.subscribe(() => {

      // tslint:disable-next-line:curly
      if (this.isScreenSmall())
        this.sidenav.close();
    })

  }

  isScreenSmall(): boolean {
    return this.mediaMatcher.matches;
  }

}

notes.component.ts:

import { Component, OnInit, Input } from '@angular/core';
import { Note } from '../../models/note';
import { MatTableDataSource } from '@angular/material';

@Component({
  selector: 'app-notes',
  templateUrl: './notes.component.html',
  styleUrls: ['./notes.component.scss']
})
export class NotesComponent implements OnInit {

  @Input() notes: Note[];

  displayedColumns = ['position', 'title', 'date'];
  dataSource: MatTableDataSource<Note>;

  constructor() { }

  ngOnInit() {
    this.dataSource = new MatTableDataSource<Note>(this.notes);
  }
}

user.service.ts:

import { Injectable } from '@angular/core';
import { User } from '../models/user';
import { HttpClient } from '@angular/common/http';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
import { Observable } from 'rxjs/Observable';

@Injectable()
export class UserService {

  private _users: BehaviorSubject<User[]>;

  private dataStore: {
    users: User[]
  };

  constructor(private http: HttpClient) {
    this.dataStore = { users: [] };
    this._users = new BehaviorSubject<User[]>([]);
  }

  get users(): Observable<User[]> {
    return this._users.asObservable();
  }

  userById(id: number) {
    return this.dataStore.users.find(x => x.id == id);
  }

  loadAll() {
    const usersUrl = 'https://angular-material-api.azurewebsites.net/users';

    return this.http.get<User[]>(usersUrl)
      .subscribe(data => {
        this.dataStore.users = data;
        this._users.next(Object.assign({}, this.dataStore).users);
      }, error => {
        // tslint:disable-next-line:quotemark
        console.log("Failed to fetch users");
      });
  }

}