동작부제: 다음이 함수가 아님

동작부제: 다음이 함수가 아님

형제자매 구성 요소 간에 데이터를 공유하고 공유 서비스를 통해 공유하려고 한다.첫 번째 구성요소가 로드되면, 내 API에서 서버 목록을 검색하고 검색된 모든 서버로 선택 상자를 채운다.이제 사용자가 새 서버를 선택할 때 다른 구성요소에 알려 세부사항을 표시하도록 하십시오.

이건 내 임무야.

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

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

}

선택 상자가 있는 구성 요소:

@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;
    });
  }

}

새 서버를 선택하면 변경() 메서드가 올바르게 호출되지만 콘솔에 다음 오류가 발생함:

오류 유형오류: _this.dashboardService.selectedServer.next는 ServersSelectComponent.change의 함수가 아님(servers-select.component.ts:39)

콘솔에서 'nulllalalal'을 받으니까 구독이 벌써 되는 것 같아.제가 무엇을 빠뜨리고 있나요?

편집: - 각도 5 및 rxjs 5.5.2를 사용하고 있음 - 내 DashboardService에서 다음과 같이 동작 부제를 가져옴:

import { BehaviorSubject } from 'rxjs/BehaviorSubject';

인ServersSelectComponent의 템플릿:

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

이것은 다음보다 우선한다.selectedServer옵션 중 하나에 해당하는 서비스 속성

RxJS 제목을 통해 변경사항을 내보내고자 하는 경우 반드시 사용하지 마십시오.[(ngModel)]그리고 다음과 같이 수동으로 변경을 수동으로(change)이벤트 청취자:(change)="change($event)".

참조URL: https://stackoverflow.com/questions/47902843/behaviorsubject-next-is-not-a-function