node.js - Angular:ngModel 插值在输入文本框中返回 NaN。如何显示号码

Question

我从 NodeJs/Mongo 返回一个对象，其中一些键的值带有数字。我正在使用插值法在 Angular 模板(一种特定的表单)中显示这些值。数值在文本框中显示为“NaN”。

我正在使用 Angular 8 和 NodeJS Express 服务器。我有一个 mongo 数据库和一个如下所示的条目。

我正在尝试使用 [ngModel] 在多个文本输入框中显示这些值，以便客户可以编辑这些值。但是，当我使用插值来显示模板中的值时，我得到 NAN 作为值

这会在文本框中显示 NaN。

<div class="form-group">
     <label for="videoOffsets.prores-23976">23.976</label>
     <input type="number" class="form-control" name="videoOffsets"
                    [ngModel]="suite?.videoOffsets?.prores-23976">
</div>

从 Node/MONGO 返回对象

{
    "scope": [
        "Mixing"
    ],
    "_id": "5d4d00827c213e60b8ed7c7w",
    "name": "4",
    "type": "audio",
    "videoOffsets": {
        "prores-23976": 2,
        "prores-24": 4,
        "prores-25": 13,
        "prores-2997": 11,
        "dnxhd-23976": 5,
        "dnxhd-24": 7,
        "dnxhd-25": 3,
        "dnxhd-2997": 1,
        "h264-23976": 22,
        "h264-24": 8,
        "h264-25": 31,
        "h264-2997": 5
    }
}

Answer 1

字段的名称有一个 - 导致了这个......

改变旧方式(suite?.videoOffsets?.prores-23976):

<input type="number" class="form-control" name="videoOffsets"
                [ngModel]="suite?.videoOffsets?.prores-23976">

进入这种新方式(套件？.videoOffsets['prores-23976']):

<input type="number" class="form-control" name="videoOffsets"
                [ngModel]="suite?.videoOffsets['prores-23976']">

如this stackblitz所示还有