Angular Observables-尽管我订阅了，但我的主题还没有“观察者”

Question

我正在尝试在组件和服务之间创建一个简单的主题，订阅者关系。两者都是.ts文件。虽然我的代码看起来与我见过的一堆例子相同，但每次在我的“staff-type.service.ts”文件中调用.next（）时，调试器都显示没有“观察者”，即使我在我的“staff-type-table.component.ts”文件的构造函数中订阅。我不知道该怎么做：/

staff-type-edit.component.ts（此文件调用我的服务）

import { Component, OnInit, ViewChild } from '@angular/core';
import {FormControl, NgForm} from '@angular/forms';
import { StaffTypeService } from '../staff-type.service';
import { StaffType } from '../../models/staff-type.model';
import { FormGroup, Validators } from '@angular/forms';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';

@Component({
  selector: 'app-staff-type-edit',
  templateUrl: './staff-type-edit.component.html',
  styleUrls: ['./staff-type-edit.component.css'],
  providers: [StaffTypeService]
})
export class StaffTypeEditComponent implements OnInit {
  @ViewChild('formData') staffTypeForm: NgForm
  addStaffTypeForm: FormGroup;

  constructor(private staffTypeService: StaffTypeService, public dialogRef: MatDialogRef<StaffTypeEditComponent>) { }

  ngOnInit() {
    this.addStaffTypeForm = new FormGroup({
      'description': new FormControl(null, Validators.required),
      'code': new FormControl(null, Validators.required),
      'role': new FormControl(null, Validators.required),
      'active': new FormControl(null, Validators.required),
      'modBy': new FormControl(null, Validators.required),
      'modDate': new FormControl(null, Validators.required)
    });
  }

  onSubmitAddStaffType() {
    const addedStaffType = new StaffType(
      this.addStaffTypeForm.value.description,
      this.addStaffTypeForm.value.code,
      this.addStaffTypeForm.value.role,
      this.addStaffTypeForm.value.active,
      this.addStaffTypeForm.value.modBy,
      this.addStaffTypeForm.value.modDate);
    this.staffTypeService.addStaffType(addedStaffType);
    this.dialogRef.close();
    console.log('I can access values: ' + addedStaffType.Last_Modified_Date_Time);
    console.log(this.addStaffTypeForm);
    console.log(addedStaffType);
    // this.addStaffTypeForm.controls.
  }
}

staff-type.service.ts（此文件正在调用.next（））

import { Injectable } from '@angular/core';
import { StaffType } from '../models/staff-type.model';
import { Observable } from 'rxjs';
import { of } from 'rxjs';
import 'rxjs/add/operator/delay';
import { Subject } from 'rxjs';

@Injectable()
export class StaffTypeService {
  staffTypesChanged = new Subject<StaffType[]>();

  private staffTypeList: StaffType[] = [
    new StaffType(
      'This is a code',
      'This is a description',
      'This is a role',
      'This is active',
      'This is last modified by',
      'This is last modified date time'),
    new StaffType(
      'This is a code also',
      'This is a description  also',
      'This is a role also',
      'This is active also',
      'This is last modified by also',
      'This is last modified date time also')
    ];

  constructor() {
  }

  addStaffType(staffType: StaffType) {
    this.staffTypeList.push(staffType);
    this.staffTypesChanged.next(this.staffTypeList.slice());
    console.log('add staff type fired');
  }

  getStaffTypes(): StaffType[] {
    return this.staffTypeList.slice();
  }

  getColumns(): string[] {
    return ['Description', 'Code', 'Role', 'Active', 'Last_Modified_By', 'Last_Modified_Date_Time'];
  }

  getServiceAsObservable(): Observable<any> {
    return this.staffTypesChanged.asObservable();
  }

}

staff-type-table-component.ts（此文件应该监听.next（）调用但没有收到任何内容）

import {Component, OnInit, OnDestroy, Injectable} from '@angular/core';
import { Subscription } from 'rxjs/Subscription';
import { Observable } from 'rxjs';
import { Observer } from 'rxjs/Observer';
import { StaffType } from '../../models/staff-type.model';
import { StaffTypeService } from '../staff-type.service';

@Component({
  selector: 'app-staff-type-table',
  templateUrl: './staff-type-table.component.html',
  styleUrls: ['./staff-type-table.component.css']
  // , providers: [StaffTypeService]
})

@Injectable()

export class StaffTypeTableComponent implements OnInit, OnDestroy {
  staffTypes: StaffType[];
  columns: string[];
  private staffTypeServiceSubscription: Subscription;
  private staffTypeObserver: Observer<any>;

  constructor(private staffTypeService: StaffTypeService) {
    this.staffTypeServiceSubscription = this.staffTypeService.getServiceAsObservable()
      .subscribe(
        (updatedStaffTypes: StaffType[]) => {
          this.staffTypes = updatedStaffTypes;
          console.log('subscription is firing');
        }
      );
  }

  ngOnInit() {
    // this.staffTypeServiceSubscription = this.staffTypeService.getServiceAsObservable()
    //   .subscribe(
    //     (updatedStaffTypes: StaffType[]) => {
    //       this.staffTypes = updatedStaffTypes;
    //       console.log('subscription is firing');
    //     }
    //   );
    // this.staffTypeObserver = this.staffTypeServiceSubscription;
    this.columns = this.staffTypeService.getColumns();
    this.staffTypes = this.staffTypeService.getStaffTypes();
  }

  ngOnDestroy() {
  }
}