以编程方式创建 dataList

我正在尝试以编程方式创建一个表，其中一个单元格包含数据列表。下面是片段

  @CustomTag( 'phone-form')
  class PhoneForm extends PolymerElement
  {
    @observable List<String> providers = [ '', 'AT&T', 'Digicel', 'Flow', 'Lime' ];
    @observable List<String> phones = ['', 'Car', 'Call-back', 'Fax', 'Home', 'Home Fax', 'Home Mobile',
                           'Home Video', 'Mobile', 'Pager', 'Work',
                           'Work Direct', 'Work Fax', 'Work Mobile', 'Work Video',
                           'Next-of-Kin Home', 'Next-of-Kin Mobile',
                           'Next-of-Kin Work', 'Tollfree', 'Web Phone'];

    int phoneSelectedIndex = 0;

    TableElement table;


    PhoneForm.created() : super.created()
    {
        table = $['table'];
        //table.border="2";

        TableSectionElement head = table.createTHead();

        TableRowElement th =  table.tHead.insertRow(-1);
        th.insertCell(0).text = "Type";
        th.insertCell(1).text = "Provider";
        th.insertCell(2).text = "Number";

        ButtonElement newLineBtn = new ButtonElement()
           ..text = 'New Number'
           ..onClick.listen( (e)
              {

                e.preventDefault();
                insertRow();

              });

        th.insertAdjacentElement( 'beforeend', newLineBtn );


    }


    void insertRow()
    {

      Phone new_phone = new Phone();

      TableSectionElement tBody = table.createTBody();

      TableRowElement newLine = tBody.insertRow(-1); // add at the end
      newLine.insertCell(0).insertAdjacentHtml('beforeend',
        '''<input id='provider'
           name='provider'
           type='text'
           value='{{${phone.provider}}}'
           list='providers'
           placeholder='Verizon'
           required
           on-change='{{${submit}}}'>

           <datalist id='providers'>
             <template repeat='{{provida in providers}}'>
               <option value='{{provida}}'>{{provida}}</option>
             </template>
          </datalist>
       ''');

      DataListElement provider = new DataListElement()
        ..onClick.listen( (e)
              {

              });
      newLine.insertCell( 1 ).insertAdjacentElement( 'beforeend', provider );

      TextInputElement numElem = new TextInputElement();
        numElem.onChange.listen( (e)
              {
                 print( 'Changeed');
                 new_phone.num = numElem.value;

                 print( encode ( new_phone ) );


              });


      newLine.insertCell( 2 ).insertAdjacentElement( 'beforeend', numElem );

    }

然而 ... 1、三引号中的小胡子内容均未按预期渲染 2.如何在下面的代码中以编程方式创建数据列表

      DataListElement provider = new DataListElement()
        ..onClick.listen( (e)
              {

              });

据我所知，不可能使包含胡须的动态构建标记绑定到字段。

聚合物0.15.0添加injectBoundHtml。 使用的表达式必须已在某处使用过，以便 Smoke 知道为它们生成代码。 看https://groups.google.com/a/dartlang.org/d/msg/web/uqri0fpGH10/dPm169WUiUwJ https://groups.google.com/a/dartlang.org/d/msg/web/uqri0fpGH10/dPm169WUiUwJ更多细节。

只需将 HTML 放入 Polymer 元素的模板中即可。
我在您的示例中看不出您需要动态创建 HTML 的原因。

如果您绝对想动态添加 HTML，您还可以迭代列表并将要直接绑定到生成的 HTML 中的值包含在内。

如果您必须动态构建 HTML，您可以使用Node.bind()动态创建绑定。

这是一个使用的示例Node.bind() Dart：动态使用polymer-ui-tabs和polymer-ui-pages不起作用 https://stackoverflow.com/questions/23083760