为什么我的代码没有将值赋给变量

Question

我有一个从 API 获取数据的方法，我试图将其分配给变量 PartData[]

export interface PartInfo{
    PartData: Parts[];
}



getSpecificPart() {
        this.partService.getSpecificPart().subscribe((response: PartInfo) => {
          //debugger;
          console.log(response);
          this.partInfo.PartData = response?.PartData?.map((item) => {
            return {
               PartNum: item?.PartNum,
              PartDescrition: item?.PartDescrition,
              PartName: item?.PartName,
               // Add other required properties for Parts here
            } as Parts;
          });
        });
      }

我得到的

console.log(response);

值是正确的响应。

但是当我运行这个时：console.log(this.partInfo.PartData);浏览器中的结果是未定义。

我期望它的响应值是：

Answer 1

您的

onClick

事件调用订阅可观察对象的

getSpecificPart()

方法。在可观察对象发出值之前，不会设置

this.partInfo.PartData

的值。

问题在于您的代码中：

1    onClick() {
2        this.getSpecificPart();
3        console.log(this.partInfo.PartData);
4    }

第2行被执行，它在内部订阅了observable，然后第3行在值被设置之前执行，所以值仍然是

undefined

。然后执行订阅回调，设置该值。

---

我不确定您的意图，但一种解决方案可能是让您的方法返回并可观察，并在您的点击处理程序中订阅该方法。

getSpecificPart(): Observable<Parts> {
    return this.partService.getSpecificPart().pipe(
        map(response => response?.PartData?.map(item => ({
            PartNum: item?.PartNum,
            PartDescrition: item?.PartDescrition,
            PartName: item?.PartName,
        })))
    );
}

onClick() {
    this.getSpecificPart().subscribe(
        partInfo => console.log(partInfo.PartData)
    );
}