Dom 动态检测Dart中勾选的复选框/聚合物元素

一个没有JS经验的新手。 我已经编写了用于填充JSON下拉列表的代码

编辑： 我试图添加聚合物元素

聚合物.省道

import 'package:polymer/polymer.dart';

@CustomTag('player-item')
class PlayerItem extends PolymerElement{
  @observable String playerName='hello';
  void removePlayer(){
    playerName='';
  }
  PlayerItem.created(): super.created(){}

}

最初获取未定义构造函数的错误。将空括号添加到 超级创造。错误修复 我做错了什么。如何正确地做到这一点

polymer.html

playername=动态显示的玩家名称

现在使用默认字符串

removeplayer=（想法是）移除整个聚合物元素

<polymer-element name="player-item">
  <template>
    <input type="image" src="button_minus_red.gif" on-click="{{removePlayer}}">
    <div>{{playerName}}</div>

  </template>

  <script type="application/dart" src="player-item.dart"></script>
</polymer-element>

{{playerName}

编辑的Dart代码： 目标是首先生成选项，然后选择其中一个，然后单击图像（用于此目的的聚合物元素）将其删除

通过了聚合物的例子掌握。但是找不到相关的东西

所需帮助： 1.如何动态添加聚合物元素

如何将值（即在本例中为玩家名称）传递给动态添加的 高分子元素

如何去除聚合物元素

如何删除通过*.appendedtext添加的附加文本

导入'dart:html'；
导入“dart:convert”显示JSON；
导入“dart:async”显示未来；
进口“包装：聚合物/聚合物.dart”；
导入“玩家物品.飞镖”；
//按钮元素genButton、desButton；
选择元素选择团队；
团队精神；
你的球员；
投入要素团队成员；
//最终订阅=[]；
列表团队=[]；
Listplayers=[]；
main（）异步{
selectTeam=querySelector（“#teamNames”）；
teamPlayer=querySelector（“#teamPlayers”）；
yourPlayer=querySelector（“#yourPlayers”）；
选择team.onChange.listen（populateTeams）；
试一试{
等待准备步骤1（）；
selectTeam.disabled=false；//启用
//genButton.disabled=false；
}捕获（arrr）{
打印（'Error initialized team names:$arrr'）；
}
}
void populateYourPlayer（字符串名称）{
querySelector（“#yourPlayers”）.children.add（新元素.tag（'player-item'））；
var输入=新的InputElement（）；
input.type=“image”；
input.src=“button\u减去\u red.gif”；
input.id=名称；
打印（“yo”）；
输入宽度=15；
输入高度=15；
输入。追加文本（名称）；
input.onClick.listen（（删除）{
remove.preventDefault（）；
input.remove（）；
//您的player.children.remove（）；
});
yourPlayer.append（输入）；
//yourPlayer.append（y）；
yourPlayer.appendText（名称）；
yourPlayer.appendHtml（“
”）；
}
无效移除玩家（事件e）{
yourPlayer.querySelectorAll（“输入[type=checkbox]”）.forEach（（cb）{
//打印（'${cb.checked}'）；
如果（cb.checked==true）{
打印（'${cb.id}'）；
yourPlayer.children.removehere（（cb）=>cb.checked==true）；
}
}
);
}
Future prepareTeams1（）异步{
字符串路径='teams.json'；
String jsonString=await-HttpRequest.getString（路径）；
parseTeamNamesFromJSON（jsonString）；
}
parseTeamNamesFromJSON（字符串jsonString）{
Map team=JSON.decode（jsonString）；
团队=团队[‘团队’]；
印刷（团队）；
for（int i=0；i”）；
}
}
无效人群团队（事件e）{
打印（'selectTeam.length:${selectTeam.length}'）；
打印（选择team.value）；
prepareTeams2（选择team.value）；
如果（selectTeam.length==0）{
}
}

修改的HTML：

海盗徽章
球队名称
团队成员
添加玩家/玩家
你的球员
移除一个或多个玩家

并基于该选择显示带有复选框的表单。 我面临的问题是如何检测他们选中了哪些复选框，如果是，如何捕获该复选框的值

可能重复

但是，这些复选框不是动态创建的

---

如果上述方法错误，请告知。

您可以阅读

CheckboxInputElement的
checked
属性

ParsePlayerNameFromJSON（字符串jsonString，字符串团队）{
Map team=JSON.decode（jsonString）；
团队=团队[团队]；
印刷（团队）；
for（int i=0；i    parsePlayerNamesFromJSON(String jsonString,String Team){
      Map team = JSON.decode(jsonString);
      teams = team[Team];
          print(teams);   
          for (int i =0; i< teams.length; i++){
          var input = new CheckboxInputElement();
          input.type = "checkbox";
          input.id = "player";
          input.onChange.listen((_) {
            print("teamplayer ${input.checked}");
          });
          teamPlayer.append(input);
          teamPlayer.appendText(teams[i]);
          teamPlayer.appendHtml("<br>");

    }

querySelector("input[type=submit]").onClick.listen((e) {
  querySelectorAll("input[type=checkbox]").forEach((cb) {
    print('${cb.id} {cb.checked}');
  });
});

teams.forEach((team) {
  var input = new InputElement()
    ..type = "checkbox"
    ..id = "player"
    ..onClick.listen((e) {
      print('${cb.id} {cb.checked}');
    });
  teamplayer
    ..append(input)
    ..appendText(team)
    ..appendHtml("<br>");
}

import 'dart:async';
// ...
final subscriptions = <StreamSubscription>[];
// ...
subscriptions
  ..forEach((s) => s.cancel())
  ..clear();
teams.forEach((team) {
  var input = new InputElement()
    ..type = "checkbox"
    ..id = "player";
  subscriptions.add(input.onClick.listen((e) {
      print('${cb.id} {cb.checked}');
    }));
  teamplayer
    ..append(input)
    ..appendText(team)
    ..appendHtml("<br>");
}