0

次のコードがあります：

@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 に追加された要素は表示されません。

4

1 に答える 1

1

このコード行は効果がありません

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

なぜなら

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

ダートパッドで試す

falseコレクションの場合、Dart はコンテンツではなく ID を比較するためです。ヘルパーがいます。Dart でリストの等価性を比較するにはどうすればよいですか? を参照してください。

代わりにできることは

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

ダートパッドで試す

Dart では、ドット表記を使用して Map の要素にアクセスできないため、これは機能しません。

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

これを次のように変更すると

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

意図したとおりに動作するはずです。

于 2015-04-09T12:40:06.680 に答える