无法将服务中的数据订阅到组件 [重复]答案

【问题标题】：Unable to subscribe data from the Service to component [duplicate]无法将服务中的数据订阅到组件 [重复]
【发布时间】：2019-09-05 20:12:44
【问题描述】：

我正在尝试将数据从服务中获取到下面的组件中是我的服务

服务.ts

export class PrjService {
  tDate: Observable<filModel[]>;
  prjData:Observable<filModel[]>;
entityUrl;
constructor(){
this.entityUrl = 'PrjDetail/GetByRep';
    this.tDate = service.get<ShipDateFilterModel[]>(this.entityUrl);
}

我尝试检索的组件如下所示

export class RFComponent implements OnInit {
  cachedResults: any[];
  shipToData: any;

constructor(private psService: PrjService)
{}
  ngOnInit() {
     this.psService.tDate.subscribe(x => this.cachedResults = x);
     this.filterData = [...new Set(this.cachedResults.map(item => item.cus_name))].filter(Boolean);
  }

每当调用服务时，this.cachedResults 是未定义的，我在下面得到错误，就像我试图过滤的地方一样

错误类型错误：无法读取未定义的属性“地图”

不确定我在这里缺少什么

【问题讨论】：

见前面提到的suggested duplicate。异步调用是编写/设计应用程序的常见且关键的构建块。了解如何在 javascript 中以及通过扩展 typescript 处理异步调用至关重要。了解这些核心概念将帮助您成为一名更好的程序员，并确保您不会一直在同一个问题上“磕磕绊绊”。
@Igor 示例解释了 Ajax 调用
都是一样的，它是一个异步调用，你订阅一个动作，一旦检索到结果就会发生。如果它是来自 jquery 的 observable、promise、ajax 调用等，则无关紧要。概念是相同的。也就是说，如果您想要 rxjs 的特定示例，这里是另一个类似的副本：How do I return the response from an Observable/http/async call in angular?
简而言之，在ngOnInit 的主体中，第一个 LoC（代码行）订阅了一个异步操作，而在下一行代码中，您已经对该结果进行了处理，但是该回调尚未执行。任何一个副本都很好地解释了如何处理异步调用。一旦你掌握了它的窍门，你就不会再犯这样的“简单”错误了，所以值得一看，因为异步调用在大多数应用程序中相当多产。
我认为 Igor 想说的是你需要知道订阅是异步的，最后一行 filterdata 你需要在 subscibe 函数中移动到你分配缓存结果的位置

标签： javascript angular typescript angular7 angular-routing

【解决方案1】：

由于您正在进行异步调用，当控制到达filteredData 语句时，cachedResults 值不会从服务中获取。这就是undefined 错误的原因。

要解决这个问题，您必须在服务调用完成并返回数据作为响应之后执行语句。

 ngOnInit() {
     this.psService.tDate
     .subscribe(x => {
        this.cachedResults = x;
        this.filterData = [...new Set(this.cachedResults.map(item => item.cus_name))].filter(Boolean);
     });
  }

另一种方法是使用 Observable 对象的finally 方法。

 ngOnInit() {
        this.psService.tDate
        .finally(() => {
             this.filterData = [...new Set(this.cachedResults.map(item => item.cus_name))].filter(Boolean);
         })
        .subscribe(x => {
           this.cachedResults = x;
        });
    }

这里，finally 方法在 observable 完成后或发生错误时调用。

【讨论】：