JSON 对象在 API 调用和前端之间丢失信息

Question

我正在创建一个网站，该网站从我自己编写和托管的 RESTapi 中获取信息，到目前为止还没有数据问题。

现在我正在尝试一个简单的 json 对象检索，并且我正确地获取了所有信息，如 API 中所示。 （在 Swagger 中可视化和测试）

您可以清楚地看到，它正确地检索了完整的对象和基础对象（模糊的敏感信息）。

但请注意属性“AmountOfEggs”。

现在，当我在我的站点中调用此 api 端点（完全相同的方式）并 console.log 记录 result.data 时，这就是反馈。

现在由于某种原因，我无法在前端收到 AmountOfEggs。

我重新创建了整个对象，写了不同的名字，传递了不同的 props（Id、NumberBus 等在这种情况下传递没有问题，它们也是 int（数字）类型）。

我不知道为什么这个属性在传输中被“丢弃”并填充/默认为空字符串。

任何帮助将不胜感激。

Answer 1

我发现了哪里出了问题，这是由于不同的因素造成的。

首先，我使用 Vue 框架制作这个网站，该框架具有响应式组件，这意味着数据会得到调整，并且您可以在视图/页面上获得实时更新的组件。

在包含调用的页面中，我还想添加动态样式。我用于此的代码如下：

v-for="seller in retrievedSellers"
      :key="seller.Id"
      :class="[
        'sellerStyle'
        , (seller.AmountOfEggs = 0 ? 'grey-out-seller' : ''),
      ]"

现在要注意两点，首先这可能看起来像后端编码，但这是 .vue 文件上的 Vue 逻辑，它处理 Vue 提供的动态选项，所以我从没想过在这里寻找错误。

couse 的错误是 'seller.AmountOfEggs = 0' 部分，使用一个等号（赋值）而不是两个（比较）。

所以我学会了，

1. Vue 不会在用于生成前端的代码中的赋值引发错误（您永远不应该更改您的数据）。
2. 我的 console.log 是 API 响应进来的那一刻，显然它在点击 console.log 之前已经被分配了一个新值（由于我上面的代码）。

Vue 首先处理 ^this^ 以确保您的反应组件在完成 api 调用本身之前是最新的，这仍然让我感到非常惊讶。

但是，我还是不明白它是怎么写“”而不是0的。

我正在使用打字稿（javascript 强类型），所以它肯定想要包含一个数字而不是一个空字符串。即使在我的 DTO 声明中，该属性也被定义为（并期望）一个数字。