我正在开发一个应用程序，它将图像发送到Microsoft Face API并取回Face Rectangle坐标，我可以使用它在原始图像上绘制它。下面是代码的负责部分（我们已经收到了API响应，存储在this.faceApiResponse: Observable<FaceRecognitionResponse>中：

//API call
        this.faceApiResponse = this.faceRecognitionService.sendImage(...);

        //Drawing
        var canvas = <HTMLCanvasElement> document.getElementById("imgCanvas");
        var ctx = canvas.getContext("2d");
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        var img = new Image();
        img.src = this.imageString;

        img.onload = () => {
          ctx.drawImage(img, 0,0, img.width, img.height, 0, 0, 650, img.height * 650/img.width);
          this.faceApiResponse.pipe(tap(face => {
              ctx.rect(face.faceRectangle.left * 650/img.width,
              face.faceRectangle.top * 650/img.width,
              face.faceRectangle.width * 650/img.width,
              face.faceRectangle.height * 650/img.width);
              ctx.strokeStyle="#00ff00";
              ctx.stroke();
              alert("Finished");
          })).subscribe(_ => console.log("Canvas populated with rectangles"));
        }

ctx.drawImage在每次上传新图像时都会被调用，并且它工作得很好，但是矩形绘制部分不会（我已经封装在pipe(tap())中，因为this.faceApiResponse是Observable）。
下面是face.model的一部分：

export interface FaceRecognitionResponse {
  //other fields...
  faceRectangle: FaceRectangle;
}

interface FaceRectangle {
  top: number;
  left: number;
  width: number;
  height: number;
}

冲浪虽然类似的问题，我意识到，大多数时候，人们不subscribe到管道的结果。我做了，但它仍然没有帮助的问题。使用的rxjs版本是6.5.4。

编辑：我计算出来的是face.faceRectangle是undefined。即使有API响应并且通过数据绑定显示在页面上...