错误 |删除 SelectElement 上不允许的属性

Question

我正在尝试使用一个按钮在 html table 中添加一个新行，当按钮被点击时，另一个按钮删除 row/s 复选框被选中.我遇到两个问题：

只要单击添加按钮，我就会得到 Removing disallowed attribute SELECT on-change="{{ onChangeTypeFired }}"
如果我 select 两个复选框并单击删除行按钮，它会抛出 indexIndexSizeError：索引或大小为负数，或大于允许值。提供的索引 (2) 大于 table (2) 中的行数。

文件如下所示

.html

        <!DOCTYPE html>

        <link rel='import' href='../../../../packages/polymer/polymer.html' >

        <link rel='import' href='../../../../packages/paper_elements/paper_checkbox.html' >
        <link rel='import' href='../../../../packages/paper_elements/paper_button.html' >
        <link rel='import' href='../../../../packages/core_elements/core_collapse.html' >
        <link rel='import' href='../../../../packages/core_elements/communication_icons.html' >

        <polymer-element name='phone-form'>
          <template>

            <div
              class='parent-container'>
              <paper-button id='add-btn' on-click='{{toggle}}'>
                <core-icon id='toggle-btn-icon' icon=''></core-icon>
                Phone
                <core-icon id='validation-icon' class='margin-l5px' icon=''></core-icon>
              </paper-button>



            <table id='table' border='1' width='350px'>
                <tbody><tr>
                    <td><input name='chk' type='checkbox'></td>
                    <td>
                      <select id='phoneType' class='width95percent'
                          selectedIndex='{{typeSelected}}' 
                          on-change='{{onChangeTypeFired}}'>
                          <option template repeat='{{key in types.keys}}' 
                          value='{{types[key]}}'>{{types[key]}}
                        </option>

                      </select>
                    </td>
                </tr>
            </tbody></table>
             </div>
             <div>
              <paper-button raised id='add-row-btn' class='margin-8px'

                on-click='{{addRow}}'>
                Add Row
                <core-icon id='add-row-btn-icon' icon='check-all'></core-icon>
              </paper-button>

              <paper-button raised id='delete-row-btn' class='margin-8px'

                on-click='{{deleteRow}}'>
                Delete Selected Row(s)
                <core-icon id='delete-row-btn-icon' icon='check'></core-icon>
              </paper-button>

             </div>



            </div>
          </template>
          <script type='application/dart' src='phone_form.dart'></script>
        </polymer-element>

.dart

import 'package:polymer/polymer.dart';
import 'dart:html' as dom;

import 'package:paper_elements/paper_button.dart' show PaperButton;
import 'package:core_elements/core_collapse.dart';

//import 'package:epimss_shared/epimss_shared.dart';
//import 'package:epimss_shared/epimss_shared_client.dart' hide DataEvent;

@CustomTag('phone-form')
class PhoneForm extends PolymerElement {

  @observable String errorMsg;
  String topic;
  PaperButton addBtn;

  int typeSelected = 0;
  CoreCollapse coreCollapse;

  @observable
  Map<String, String> types = <String, String> {
    '': '',
    'Car': 'Car',
    'Direct': 'Direct',
    'Fax': 'Fax',
    'Home': 'Home',
    'Mobile': 'Mobile',
    'Video': 'Video',
    'Work': 'Work'
  };

  PhoneForm.created() : super.created();


void toggleCoreCollapse() {
  coreCollapse.toggle();
}

  void onSelectTypeFired()
  {

  }

  void onChangeTypeFired( dom.Event e, var detail, dom.SelectElement target)
  {
    print(target.value);
  }

  void addRow()
  {
    var table = $['table'];
    var rowCount = table.rows.length;
    var row = table.insertRow(rowCount);
    var colCount = table.rows[0].cells.length;

    for(var i = 0; i<colCount; i++ )
    {
      var newcell = row.insertCell(i);
      newcell.innerHtml = table.rows[0].cells[i].innerHtml;

      switch(newcell.childNodes[0].runtimeType.toString())
      {
        case 'text':
          newcell.childNodes[0].value = '';
          break;

        case 'checkbox':
          newcell.childNodes[0].checked = false;
          break;

        case 'select':
          newcell.childNodes[0].selectedIndex = 0;
          break;
      }
    }
  }


  void deleteRow()
  {

    var rowsToDelete = [];

    try{
      var table = $['table'];
      var rowCount = table.rows.length;

      for(var i = 0; i < rowCount; i++)
      {
        var row = table.rows[i];
        var chkbox = row.cells[0].childNodes[0];

        if(chkbox != null && chkbox.checked)
        {
          if(rowCount <= 1)
          {
            print('Cannot delete all the rows.');
            break;
          }
          else
          {
            rowsToDelete.add(i);
          }
        }
      }

      rowsToDelete.forEach( (row)
          {
            table.deleteRow(row);
          });
    }
    catch(e)
    {  print(e); }
  }


  @override
  void attached() {
    super.attached();
    topic = this.dataset['topic'];

    coreCollapse = $['core-collapse'];

    addBtn = $['add-btn'];
  }



}

感谢您的帮助。

Answer 1

可能是这条线造成的

newcell.innerHtml = table.rows[0].cells[i].innerHtml;

您需要指定允许将哪些元素和标签添加到字符串中的 DOM。有关详细信息，请参阅。

当您像 new DivElement() 这样强制生成元素时，这不适用。

在你的例子中，做类似

的事情可能会更容易也更好

newcell.children.clear();
newcell.children.addAll(table.rows[0].cells[i].children.map((c) => 
    c.clone(true)));

注意：我不确定代码应该是什么样子，但我想你明白了。如果您无法解决问题，请添加评论，我会仔细查看。

错误 |删除 SelectElement 上不允许的属性

Error | Removing disallowed attribute on SelectElement

dart

dart-polymer