Question

所以我有一个从我的数据库进来的对象，里面填充了一些变量和一个类型为genericEnum的变量，而genericEnum也是这样定义的。

export enum GenericEnum {
     optionOne = 1,
     optionTwo = 2,
     optionThree = 3,
     optionFour = 4,
     optionFive = 5,
     optionSix = 6
}

所以现在这个对象出现了，变量让它只是称之为selectOptions，从数据库中下来并等于4.所以

selectOptions: GenericEnum = 4;

我正在尝试双向将变量绑定到select标记，这样，如果选择了一个选项，说“optionSix”，那么变量的值将从4变为6.

这是我到目前为止尝试使用的HTML。

<select ng-model="$ctrl.myObject.selectOptions">
                <option value="1">Option One</option>
                <option value="2">Option Two</option>
                <option value="3">Option Three</option>
                <option value="4">Option Four</option>
                <option value="5">Option Five</option>
                <option value="6">Option Six</option>
            </select>

理想情况下，在页面加载时，下拉框显示一个预先选择的选项，该选项等于加载时的变量的当前值。所以下拉框会说“选项四”。然后，如果我选择“选项六”，保存该选项并重新加载页面，变量selectOptions将= 6，因此下拉框将被预先选择为“选项六”

现在，当我加载页面时，下拉框将作为空白加载而不是加载为“选项四”。当我展开我的框时，所有选项都可供选择，但变量selectOptions等于4，所以我希望下拉框默认选择此选项，但似乎不是这种情况。我认为这与TypeScript如何转换枚举有关。

例如，这是我的枚举产生的javascript

Typescript Playground Enum Example

在一个单独的堆栈溢出中，我正在阅读一些关于利用ng-repeat（键，值）能力的内容，但却未能使其正常运行，并且想知道这可能不适合我。

如果我没有充分解释选择元素的预期行为，请告诉我，以便我可以尝试提供更多信息，感谢所有人的帮助！

Answer 1

如果你想要解决方案的一般要点，那么最后会有一个博士。

所以我最终找到了解决这个问题的方法，并希望与所有人分享，以防其他人在将来发现它有用。

在我的Angular控制器中，我必须将我的枚举重建为数组，如此

selectOptionTypes: any[] = [];

$onInit(): void {
    this.buildSelectOptionTypesList();
}

buildSelectOptionTypesList = () => {
    this.selectOptionTypes.push({ value: 1, key: 'Option One' });
    this.selectOptionTypes.push({ value: 2, key: 'Option Two' });
    this.selectOptionTypes.push({ value: 3, key: 'Option Three' });
    this.selectOptionTypes.push({ value: 4, key: 'Option Four' });
    this.selectOptionTypes.push({ value: 5, key: 'Option Five' });
    this.selectOptionTypes.push({ value: 6, key: 'Option Six' });
}

然后在html中我使用ng-options和ng-model创建了一个select语句。

<select 
    ng-model="$ctrl.myObject.selectOptions" 
    ng-options="option.value as option.key for option in $ctrl.selectOptionTypes"
>
</select>

这会生成我的6个项目的下拉框，并且在加载时会预先选择与我的模型变量的数值相对应的选项，＆＃34; myObject.selectOptions＆＃34;

myObject.selectOptions从数据库中下载，值为4，因此我的下拉框的第4个选项被自动选中并显示。此外，在数据库中手动更改值时，或者通过在下拉框中选择不同的选项，变量的值将会更改，并且在加载时，下拉框将反映新的更改。

这就是我发现的解决方案，可以动态地将HTML Select标记中的选项设置为选中=＆＃34;选择＆＃34;基于ng-model的双向约束变量的当前值。

总结：如果您的变量属于enum类型，请将该枚举重构为控制器中的数组。将您的ng-model设置为等于您的变量，并使用ng-options＆＃39;设置与枚举的数组版本相关的ng-options。内置关键和价值能力。

有关ng-options的更多信息，请参阅Angular的指令文档中的here

使用AngularJS和TypeScript

1 个答案: