从 GET json 响应中填充下拉列表中的数据 - Angular4

Question

我正在尝试在命令下拉列表中显示 json keys/fields；这是对象类型（见下面的json）例如："key1"、"key2" 应该出现在下拉列表中。最初使用 *ngfor 但它给出错误 - "ngfor only supports binding for iterables such as Arrays"。由于我的 json 不包含数组，因此尝试在其中使用 ng-options 但无法填充下拉列表。我的 json 看起来像：

{
    id: ‘bla’,
    commands: {
        “key1” : { },
        “key2”: { }
    }
}

html代码：

<select ngModel="selectedName" ng-options="cmd for cmd in cmdJson" name= "CapabilityCmd" required>

在打字稿代码中：

this.http.get(URL, options)
      .pipe(map ((response) => response.json()))
      .subscribe((res) => {
        this.commandResponse = res;
        this.cmdJson = this.commandResponse.commands;
        console.log("commands:", this.cmdJson);
      });

我注意到 cmdJson 显示了正确的响应（即；

{“key1”：{}， “key2”：{}}

) 在控制台中，但未填充到下拉框中。

Answer 1

no ng-options 在 angular 中可用，您正在使用 angularjs 语法，而不是使用 ngFor

<select [(ngModel)]="selectedName">
    <option *ngFor="let cmd of cmdJson" [value]="cmd ">
      {{cmd}}
    </option>
</select>

从 GET json 响应中填充下拉列表中的数据 - Angular4

Populate the data in drop-down from a GET json response- Angular4

html

angular

typescript

ng-options