Javascript 无法将数据从服务订阅到组件

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

服务台

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

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

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

---

不确定我在这里遗漏了什么

因为您正在进行异步调用，所以当控件到达filteredData语句时，不会从服务中获取cachedResults值。这就是未定义错误的原因

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

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

另一种方法是使用可观察物体的最终方法

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

---

这里，finally方法是在可观察对象完成后或出现错误时调用的。

参见前面提到的。异步调用是编写/设计应用程序时常见且关键的构造块。理解如何使用javascript中的异步调用以及扩展typescript非常重要。理解这些核心概念将有助于你成为一名更好的程序员，同时也确保你不会在同一个问题上不断犯错。@Igor示例解释了Ajax调用。这是一个异步调用，在该调用中，一旦检索到结果，你就订阅一个操作。如果它是一个可观察的、承诺的、来自jquery的ajax调用，那么它就无关紧要了。也就是说，如果您想要rxjs的一个特定示例，这里有另一个类似的重复：它的缺点是，在ngOnInit的主体中，第一行代码订阅了一个异步操作，而在下一行代码中，您已经使用该结果做了一些事情，但回调尚未执行。这两个副本都很好地解释了如何处理异步调用。一旦你掌握了窍门，你就不会再犯这样的简单错误了，因此值得一看，因为异步调用在大多数应用程序中都相当丰富。我认为Igor想说的是，你需要知道subscribing是异步的，你需要在subscibe函数中沿着分配的位置移动最后一行filterdata缓存结果

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