添加删除项目按钮 - ToDo App - Dart

Question

我对飞镖很陌生，所以不要评判我。 :))

我刚开始用 Dart 编写一个简单的 ToDo 应用程序。我想为项目添加一个按钮，以便我可以从列表中删除它。我成功添加了按钮，但点击事件没有工作。

我知道为什么代码不起作用，但不知道解决这个问题的最佳解决方案是什么。

一些改进会很棒。

提前致谢 罗恩

my little sexy dartpad

Answer 1

您需要注册onClick 监听以删除每个按钮上的当前项目。这是您的代码的工作版本。

import 'dart:html';

InputElement toDoInput;
UListElement toDoList;

void main() {
  toDoInput = querySelector('#to-do-input');
  toDoList = querySelector('#to-do-list');

  toDoInput.onChange.listen(addToDoItem);
}

// Add item to list
void addToDoItem(Event e) {
  final toDoItem = new LIElement();
  toDoItem.text = toDoInput.value;

  final deleteItemButton = new ButtonElement()
    ..text = 'Delete'
    ..onClick.listen((_) => toDoItem.remove());

  toDoItem.children.add(deleteItemButton);
  toDoList.children.add(toDoItem);

  toDoInput.value = '';
}