Search code examples
dartdart-polymercore-elements

Dart Polymer error 'List' is not a subtype of type 'ObservableList' of 'value'


I am using core-ajax-dart to fetch some data and put it in core-list-dart. And i keep getting this error. I am able to successfully pass heading which is String but I am not able to pass contacts. It fails with the following error

Exception: Uncaught Error: type 'List' is not a subtype of type 'ObservableList' of 'value'.

main page

<core-ajax-dart auto id="_ajax" url="https://polymer-contacts.firebaseio.com/{{category}}.json" handleAs="json"></core-ajax-dart>
<contacts-page class="page" id="contacts" contacts="{{contacts}}" heading="{{heading}}" flex></contacts-page>
List contacts;
ContactsPage cp = $['contacts'] as ContactsPage;
var ajax = $['_ajax'] as CoreAjax;
    ajax.on["core-response"].listen((event) {
      var detail = event.detail;
      var response = detail['response'];
      cp.contacts = response;
    });

element definition

<div id="title" flex>{{heading}}</div>
<core-list-dart id="list" data="{{contacts}}">
@published List contacts;
@published String heading;

Stack trace:

Exception: Uncaught Error: type 'List' is not a subtype of type 'ObservableList' of 'value'.
Stack Trace:
#0      CoreList.data= (package:core_elements/core_list_dart.dart:48:124)
#1      main.<anonymous closure> (http://localhost:8080/index.html_bootstrap.dart:114:27)
#2      GeneratedObjectAccessorService.write (package:smoke/static.dart:114:11)
#3      write (package:smoke/smoke.dart:34:40)
#4      _updateNode (package:polymer/src/instance.dart:1412:16)
#5      _convertAndCheck (package:polymer_expressions/polymer_expressions.dart:302:16)
#6      _RootZone.runUnaryGuarded (dart:async/zone.dart:1093)
#7      _BufferingStreamSubscription._sendData (dart:async/stream_impl.dart:341)
#8      _DelayedData.perform (dart:async/stream_impl.dart:595)
#9      _StreamImplEvents.handleNext (dart:async/stream_impl.dart:711)
#10     _PendingEvents.schedule.<anonymous closure> (dart:async/stream_impl.dart:671)
#11     _asyncRunCallbackLoop (dart:async/schedule_microtask.dart:41)
#12     _asyncRunCallback (dart:async/schedule_microtask.dart:48)
#13     _handleMutation (dart:html:41817)

Almost full source


Solution

  • The data attribute of <core-list-dart> requires an ObservableList instead of List.

    What you can do is to change the field to a getter/setter where a passed List is automatically converted to a ObservableList like

    class Model extends Object with Observable {
    // or class SomeElement extends PolymerElement {
    
      ObservableList _contacts;
      @observable ObservableList get contacts => _contacts;
      set contacts(List contacts) {
        final old = _contacts;
        if(contacts is ObservableList) {
          _contacts = contacts;
        }
        _contacts = toObservable(contacts);
        notifyPropertyChange(#contacts, old, _contacts);
      }
    }