Question

我想使用以下组件（基于this question的答案）在<option>标签内动态创建<select>元素：

import Component from '@ember/component';
import { computed } from '@ember/object';

export default Component.extend({
  computedOptions: computed('optionsList.@each', function() {
    var that = this;
    return this.get('optionsList').map(function(option) {
      let optionIsSelected = option.text === that.selectedElement;
      let builtOption = {
        'option': option,
        'isSelected': optionIsSelected
      };

      return builtOption;
    });
  })
});

optionsList和selectedElement变量由另一个组件传递给该组件。

在模板中，当我使用#each块时：

<select name="{{name}}" id="{{name}}">
    {{#each computedOptions as |option|}}
        <option></option>
    {{/each}}
</select>

我在浏览器的控制台中遇到以下错误：

Error: unreachable（如果有帮助，请使用以下调用堆栈：https://pastebin.com/PkrcAFCr）

我不确定此错误的含义，也不知道为什么会发生此错误。

我设法做到这一点（某种程度上）的唯一方法是拥有此模板：

<select name="{{name}}" id="{{name}}">
    {{#each computedOptions}}
        <option value="{{option.value}}" selected={{option.isSelected}}>{{option.text}}</option>
    {{/each}}
</select>

删除as |option|并使用我的选项属性可呈现无错误的选项（在我的情况下为3个选项），但是在结果HTML中选项本身为空（<option></option>），因此看不到任何文本当我单击页面中的选择时，将显示每个选项。

这是否意味着不可能在Ember.js中动态填充<select>标签？如果可能的话，正确的方法是什么？

Answer 1

as |something|的想法是，您可以使用所需的变量名。

此问题：https://github.com/emberjs/ember.js/issues/16826向我们显示，当您的var名称是现有标签（选项，p等）时，存在一些冲突，因此您只需要执行以下操作即可：

<select name="{{name}}" id="{{name}}">
  {{#each computedOptions as |opt|}}
    <option value="{{opt.value}}" selected={{opt.isSelected}}>{{opt.text}}</option>
  {{/each}}
</select>

在#each循环中渲染<option>会引发错误

1 个答案: