在 Angular 中的组件之间共享数据

Question

Other posts don't have help me to solve this problem

I want to share a variable retrieved from an HTTP request through two components and using a service.

For this I realized this, but unfortunately the data is not displayed in my components (no error in the console) nor compilation. sharedata.service.ts

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

  private dataSourceMyContainers = new Subject<any>();

  constructor(private dataService: RestApiService) { 
    this.getContainers();
  }

  getContainers(): any{
    this.dataService.getAllContainers().subscribe((res)=>{
      this.dataSourceMyContainers = res;       
    });    
  }

  getList(){
    return this.dataSourceMyContainers.asObservable();
  }
  
  updateApprovalMessage(message: any) {
    this.dataSourceMyContainers.next(message)
  }
}

First service for example status-card.component.ts

@Injectable({
  providedIn: 'root'
})
export class StatusCardComponent implements OnInit {
  runningContainer?: number = 0;
  pausedContainer?: number = 0;
  stoppedContainer?: number = 0;
  failedContainer?: number = 0;
  dataSourceMyContainers: any = [];

  constructor(private sharedataService: SharedataService, private notification: NotificationsService) { 
  }

  ngOnInit(): any{
// it enters here
    this.sharedataService.getList().subscribe((res)=>{
      this.dataSourceMyContainers = res; // but not enter here
      console.log("res"+ res); // nothing displayed
    });    
  }  

  btnCountStatus(): void {
    this.runningContainer = this.dataSourceMyContainers.filter((container: any) => container.status === 'RUNNING').length;
    this.pausedContainer = this.dataSourceMyContainers.filter((container: any) => container.status === 'PAUSED').length;
    this.stoppedContainer = this.dataSourceMyContainers.filter((container: any) => container.status === 'STOPPED').length;
    this.failedContainer = this.dataSourceMyContainers.filter((container: any) => container.status === 'FAILED').length;
  }
}

Thanks for help !

Answer 1

There are two issues with your code:

1. You need a BehaviorSubject instead of a Subject because u need the "replayed" value:

   private dataSourceMyContainers = new BehaviorSubject();

2. You need to "next" your results form the Http-Call

   getContainers(): any{ this.dataService.getAllContainers().subscribe((res)=>{ this.dataSourceMyContainers.next(res);
   });
   }