显示 Firebase 函数的返回值

Question

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

再次我的 html 看起来是这样（从上次稍微编辑过）：

应用程序组件.html

<div>
  <h1 align="center">Calculator App with Firebase</h1>
<app-calculator> </app-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>

计算器.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 }) <-- 这个语句，不知道我还应该输入什么firebase 提供的文档只涉及一个名为text常量。

Answer 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