dart - 监听 ObservableList 添加和删除的正确方法是什么？

Question

我有下一个代码：

@CustomTag('my-element')
class MyElement extends PolymerElement {
  MyElement.created() : super.created();

  @published ObservableList persons = toObservable([]);

  handleAdd() {
    persons.add({'name': 'jhon', 'lastName': 'Doe'});
  }

  handleRemove() {
    persons.remove({'name': 'jhon', 'lastName': 'Doe'});
  }
}

这是HTML：

<polymer name="my-element">
  <template>
    <template repeate="{{p in persons}}">
      {{p['name']}} {{p['lastName']}}
    </template>
    <button on-click="{{handleAdd}}">add person</button>
    <button on-click="{{handleRemove}}">remove person</button>
  <template>
</polymer>

调试时，它会从对象的内部列表中添加和删除。但是，它从不显示 HTML 中添加的元素。

Answer 1

此代码行无效

persons.remove({'name': 'jhon', 'lastName': 'Doe'});

因为

print({'name': 'jhon', 'lastName': 'Doe'} == {'name': 'jhon', 'lastName': 'Doe'});

试试DartPad

打印false是因为对于集合 Dart 比较的是身份而不是内容。有可用的助手。请参阅如何比较 Dart 中的列表是否相等？

你可以做的是

persons.removeWhere((p) => p['name'] == 'jhon' && p['lastName'] == 'Doe');

试试DartPad

这不起作用，因为在 Dart 中，您无法使用点符号访问 Map 的元素

<template repeate="{{p in persons}}">
  {{p.name}} {{p.lastName}}
</template>

如果您将其更改为

<template repeate="{{p in persons}}">
  {{p['name']}} {{p['lastName']}}
</template>

它应该按预期工作。