时间戳

首页 > 解决方案 > 显示 Firebase 函数的返回值

html - 显示 Firebase 函数的返回值

问题描述

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

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

app.component.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.

标签： htmlangulartypescriptfirebasegoogle-cloud-functions

解决方案

因此，我在上面接近的东西有一些问题，下面是实现我想要实现的目标的正确方法，我将在下面尽可能地尝试和解释，以防将来有人偶然发现类似的问题.

修改了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)
    }
})

对此的主要理解是：

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

推荐阅读