使用 typeof 检查时，具有赋值的变量仍未定义

Question

我正在为一个网站做一个简单的汇率按钮，我正在用变量下的设定值对其进行测试。我仍然遇到错误，因为当我检查这个变量时它显示为未定义。可能是什么原因？我知道这是基本的东西，但我看不出这里可能是什么问题。感谢您帮助解决这个问题！

Component.ts:

public price: number = 500;
public exchangeUsd;
public priceUsd;

countUsd() {
  fetch("https://api.nbp.pl/api/exchangerates/rates/a/usd/?format=json")
    .then((resp) => resp.json())
    .then(function(data) {
      let exchangeUsd = data.rates[0].mid
      console.log("Exchange rate: " + exchangeUsd)
      console.log(this.price) //here the typeof shows undefined
      priceUsd = exchangeUsd * this.price //and it also makes this simple multiplication impossible
    })
}

Stackblitz：https://stackblitz.com/edit/flight-date-picker-with-service-done

Answer 1

无法测试，但主要是因为 .then(function(data)。将其替换为箭头函数

.then((data) => {
let exchangeUsd = data.rates[0].mid
}

Answer 2

您 this.price 在 console.log 中，应该是价格。

以下代码适合您：

public price: number = 500;
public exchangeUsd;
public priceUsd;

function countUsd() {
  fetch("https://api.nbp.pl/api/exchangerates/rates/a/usd/?format=json")
    .then((resp) => resp.json())
    .then(function(data) {
      let exchangeUsd = data.rates[0].mid
      console.log("Exchange rate: " + exchangeUsd)
      console.log(price) //here the typeof shows undefined
      priceUsd = exchangeUsd * price //and it also makes this simple multiplication impossible
    })
}

Answer 3

这是范围问题。你有两个选择。或者你在 then(...) 中使用箭头函数，或者你通过用变量捕获它来将作用域传递给函数：

选项 1：箭头函数

function countUsd() {
  fetch("https://api.nbp.pl/api/exchangerates/rates/a/usd/?format=json")
    .then((resp) => resp.json())
    .then((data) => {
      let exchangeUsd = data.rates[0].mid
      console.log("Exchange rate: " + exchangeUsd)
      console.log(price) //here the typeof shows undefined
      priceUsd = exchangeUsd * price //and it also makes this simple multiplication impossible
    })
}

选项 2：使用变量捕获作用域

function countUsd() {
  const classScope = this;
  fetch("https://api.nbp.pl/api/exchangerates/rates/a/usd/?format=json")
    .then((resp) => resp.json())
    .then(function(data) {
      let exchangeUsd = data.rates[0].mid
      console.log("Exchange rate: " + exchangeUsd)
      console.log(classScope.price) //here the typeof shows undefined
      priceUsd = exchangeUsd * price //and it also makes this simple multiplication impossible
    })
}

使用 typeof 检查时，具有赋值的变量仍未定义

Variable with assigned value is still undefined when checked with typeof

javascript

typeof

undefined

fetch

angular

选项 1：箭头函数

选项 2：使用变量捕获作用域