显示 Firebase 函数的返回值答案

【问题标题】：Display Return from Firebase Function显示 Firebase 函数的返回值
【发布时间】：2020-04-17 04:59:57
【问题描述】：

做了更多的阅读，更多的编辑，现在我认为我的主要问题是当我在 calculator.component.ts 中调用我的函数时

我的 html 再次看起来像这样（从上次稍微编辑了它）：

app.component.html

<div>
  <h1 align="center">Calculator App with Firebase</h1>
<app-calculator> </app-calculator>

calculator.component.html

<div>
  <label for="numField1"> Number 1:
  <input [(ngModel)]="numField1">
</label>
<br><br>
<label for="numField2"> Number 2:
  <input [(ngModel)]="numField2">
</label>
<br><br>
<button id = "calculate" (click)="getFirebaseFunction()">Calculate</button>
<br>
<br>
<p>Solution: {{sum | async | json}} </p>
</div>

calculator.component.ts

import { Component, OnInit, Input } from '@angular/core';
import { AngularFireFunctions } from '@angular/fire/functions';
import * as firebase from 'firebase';
@Component({
  selector: 'app-calculator',
  templateUrl: './calculator.component.html',
  styleUrls: ['./calculator.component.css']
})
export class CalculatorComponent implements OnInit {

  @Input() firstNumber: Number
  @Input() secondNumber: Number

  constructor() {  }

  ngOnInit() {
   }

  getFirebaseFunction() {

    const numField1 = this.firstNumber;
    const numField2 = this.secondNumber;
    var sum = 0


   let addNumbers = firebase.functions().httpsCallable('sum')

   addNumbers({data: (numField1, numField2)}).then(function(result) {
     this.sum = result.data.result
   })
  }  

}

最后，我的 firebase 功能 index.ts

export const sum = functions.https.onCall((data) => {
    const numField1 = data.Number
    const numField2 = data.Number




    if (!Number.isFinite(numField1) || !Number.isFinite(numField2)) {
        throw new functions.https.HttpsError('invalid-argument', 'Both Number Fields are Required for Addition')
    }
    return {
        firstNumber: numField1,
        secondNumber: numField2,
        operator: '+',
        result: numField1 + numField2
    }
})

当我运行它时，我遇到了以下错误：

Error: Both Number Fields are Required for Addition 根据我的函数，我的意思是它没有认识到输入 numField1 和 numField2 没有被传递到函数中，我认为这是因为我在 addNumbers({data: (numField1.valueOf, numField2.valueOf)}).then(function(result) { this.sum = result.data.result }) 中有问题text 的常量。

【问题讨论】：

您应该在客户端和服务器的每个阶段都放置一些日志记录语句，以确保您发送和接收的内容完全符合您的预期。我想你可能会对实际发生的事情感到惊讶。换句话说，通过检查每个处理阶段使用的事物的值来学习如何调试代码。
我猜情况比我想象的要糟糕一些，我对这种类型的东西比较陌生看看发生了什么？
编程中的许多事情都与代码作者所期望的不同。这就是为什么 Stack Overflow 上有数百万个问题。事情并不“可怕”，它们只需要理解。这就是调试的目的。
我猜 dire 是糟糕的词选择，但我明白你在说什么
首先@DougStevenson 我要感谢您在下面的正确方向上的推动我将发布一个答案，我希望这是一个有效的答案，但我很感激我的提示通过一些试验/错误和调试，至少得到了我问题的基本答案

标签： html angular typescript firebase google-cloud-functions

【解决方案1】：

因此，我在上面接近的内容有一些问题，下面是实现我想要实现的目标的正确方法，我将在下面尽力解释，以防有人偶然发现类似问题未来。

修改了calculator.component.ts

import { Component, OnInit, Input } from '@angular/core';
import { AngularFireFunctions } from '@angular/fire/functions';
import * as firebase from 'firebase';
@Component({
  selector: 'app-calculator',
  templateUrl: './calculator.component.html',
  styleUrls: ['./calculator.component.css']
})
export class CalculatorComponent implements OnInit {

  @Input() firstNumber: Number
  @Input() secondNumber: Number
  sum = 0

  constructor() {  }

  ngOnInit() {
   }

  getFirebaseFunction() {
    const addNumbers = firebase.functions().httpsCallable('sum');
    const numField1 = Number(this.firstNumber);
    const numField2 = Number(this.secondNumber); 

    addNumbers({
      firstNumber : numField1,
      secondNumber: numField2
    }).then((result) => {
      this.sum = result.data.result
    }
  )}
}

修改后的 index.ts

import * as functions from 'firebase-functions';

// // Start writing Firebase Functions
// // https://firebase.google.com/docs/functions/typescript
//
export const sum = functions.https.onCall((data) => {
    const firstNumber = data.firstNumber
    const secondNumber = data.secondNumber




    if (!Number.isFinite(firstNumber) || !Number.isFinite(secondNumber)) {
        throw new functions.https.HttpsError('invalid-argument', 'Both Number Fields are Required for Addition')
    }
    return {
        firstNumber: firstNumber,
        secondNumber: secondNumber,
        operator: '+',
        result: Number(firstNumber) + Number(secondNumber)
    }
})

对此的主要理解是：

在怀疑有问题的行中，我基本上需要将字段的输入与其在函数中的相关属性等同起来，以便在单击计算按钮时，程序会理解我们将 numField1 传递给 firstNumber 和numField2 为secondNumber

【讨论】：