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会比较身份而不是内容。有助手可用。见How can I compare Lists for equality in 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>

它应该像有条理的那样工作。

什么是正确的ObservableList添加和删除方式？

1 个答案: