使用 rxjs 在外观架构中可观察到未定义

Question

（根据建议，我正在编辑我的问题） @Gunnar.B

与 api 连接的服务

@Injectable({
  providedIn: 'root'
})
export class ConsolidadoApi {
  constructor(private http: HttpClient) { }
  getInvestiments(search?: any): Observable<any> {
    return this.http.get<any>(`${environment.basePosicaoConsolidada}`);
  }
}

此服务（层）为表示层（组件）中的组件公开状态流和接口

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

    constructor(private api: ConsolidadoApi, private state: StateService) { }

    public getInvestments$(): Observable<any> {
        return this.state.getInvestiments$()
    }

    public loadInvestments() {
        return this.api.getInvestiments()
        .pipe(
            tap(investPortifolio => this.state.setInvestments(investPortifolio))
        );
    }
}

此服务负责将转到组件的逻辑

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

  private investments$ = new BehaviorSubject<any>(null);

  public getInvestiments$() {
    return this.investments$.asObservable()
  }

  public setInvestments(investPortifolio){
    this.investments$.next(investPortifolio)
  }
}

但是在我的 html 中没有出现来自 api 的数据。

menu.component.ts

export class MenuComponent implements OnInit {
  
  investments$: Observable<any>;

  constructor( private coreService : CoreService ) {
    this.investments$ = this.coreService.getInvestments$()
   }


  ngOnInit(): void {
    this.coreService.loadInvestments();
    console.log(this.coreService.loadInvestments())
  }

}

menu.component.html

    <div>
        test
    </div>

    <div *ngFor="let investimentPortifolio of investments$ | async;">
        {{investimentPortifolio | json}}
    </div>

Answer 1

listInvestments 方法正在执行异步 API 调用。因此，当您在其上调用 forEach 时，基本上投资属性仍然未定义。

您希望在从服务器加载数据之后而不是之前循环投资数组。

一种方法是确保您在订阅的 next() 回调中，并且您确定您拥有执行操作所需的数据。

CoreService 类变为：

@Injectable({
    providedIn: 'root'
})
export class CoreService {
    public investments: any;
    constructor(private api: ConsolidadoApi, private state: StateService) {}

    public createMenu(){
      this.api.getInvestments()
            .subscribe(response => {
                this.investments = response;
                this.investments.forEach(element => {
                  console.log(element)
                });
            })
       
    }
}

问题编辑更新

在 ngOnInit 中，您调用了 loadInvestments()，它返回了一个 observable。并且 observable 是惰性的，这意味着如果你没有对它们调用 subscribe 什么都不会发生。

你需要做的是改变这一行：

this.coreService.loadInvestments();

到

this.coreService.loadInvestments().subscribe();