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>

从节点 / 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">

进入这种新方式（suite?.videoOffsets['prores-23976']）：

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

也如this stackblitz 所示