BehaviorSubject: next 不是函数

Question

我正在尝试在同级组件之间共享数据并通过共享服务执行此操作。当第一个组件加载时，它从我的 API 中检索服务器列表，并用所有检索到的服务器填充 select 框。现在我想在用户 select 编辑新服务器时通知我的其他组件，以便我可以显示它的详细信息。

这是我的服务：

@Injectable()
export class DashboardService {
    servers: Server[] = [];
    selectedServer = new BehaviorSubject<Server>(null);

    setServers(servers: Server[]) {
        this.servers = servers;
    }

}

带有 select-box 的组件：

@Component({
  selector: 'app-servers-select',
  template: `
    <div class="form-group">
      <label>Server</label>
      <select class="form-control" [(ngModel)]="this.dashboardService.selectedServer" (ngModelChange)="change($event)">
        <option disabled>-- Select server --</option>
        <option *ngFor="let server of servers" [ngValue]="server">{{server.Name}}</option>
      </select>
    </div>`,
  styleUrls: ['./servers-select.component.css'],
  providers: [ServerService]
})
export class ServersSelectComponent implements OnInit {
  servers: Server[] = [];

  constructor(private serverService: ServerService, private dashboardService: DashboardService) { }
  ngOnInit() {
    this.serverService
      .getServers()
      .subscribe(s => {
        this.servers = s;
        this.dashboardService.setServers(s);
        console.log(s);
      },
      e => console.log(e));

  }

  // todo: pass to dashboard component
  public change = (event: any) => {
    console.log(event);
    this.dashboardService.selectedServer.next(event);
  }

}

详细信息组件：

@Component({
  selector: 'app-server-details',
  template: `
  <section>
  <div class="form-group">
    <label>Description</label>
    <input type="text" [(ngModel)]="server">
  </div>
</section>
  `,
  styleUrls: ['./server-details.component.css']
})
export class ServerDetailsComponent implements OnInit {

  private server: Server = null;

  constructor(private dashboardService: DashboardService) { }

  ngOnInit() {
    this.dashboardService.selectedServer.subscribe((value: Server) => {
      console.log(value + 'lalalal');
      this.server = value;
    });
  }

}

当我 select 新服务器时，change() 方法被正确调用，但在控制台中抛出以下错误：

ERROR TypeError: _this.dashboardService.selectedServer.next is not a function at ServersSelectComponent.change (servers-select.component.ts:39)

自从我在控制台中获得 'nulllalalal' 以来，订阅似乎已经开始工作了。我错过了什么？

编辑： - 我正在使用 angular 5 和 rxjs 5.5.2 - 在我的 DashboardService 中，我按如下方式导入 BehaviorSubject：

import { BehaviorSubject } from 'rxjs/BehaviorSubject';

Answer 1

在 ServersSelectComponent 的模板中，您有：

[(ngModel)]="this.dashboardService.selectedServer"

这会用其中一个选项的值覆盖 selectedServer 服务属性。

如果您想通过 RxJS Subject 发出更改，您绝对不想使用 [(ngModel)] 并使用 (change) 事件侦听器手动触发更改，例如 (change)="change($event)"。

BehaviorSubject: next 不是函数

BehaviorSubject: next is not a function

javascript

rxjs

typescript

rxjs5

angular