dart web 组件不刷新 UI 上的列表

Question

我正在尝试创建一个简单的 Web 组件，其目的是显示消息几秒钟然后消失。我已经显示了前两个字符串，但是当我调用 informar 方法时没有任何反应:

<element name="x-informador" constructor="InformadorComponente" extens="div">
      <template>
        <ul>
          <template iterate="mensaje in mensajes">
            <li>{{mensaje}}</li>
          </template>
        </ul>
      </template>
      <script type="application/dart">

import 'dart:async';
import 'package:web_ui/web_ui.dart';
import 'package:web_ui/watcher.dart' as watcher;

class InformadorComponente extends WebComponent {

  @observable
  List mensajes = ['uno', 'dos'];

  const int DURACION_MENSAJE = 7;

  void informar(String informe) {
    mensajes.add(informe);
    watcher.dispatch();

    print('antes del Timer: ');
    print(mensajes);

    new Timer(new Duration(seconds: DURACION_MENSAJE), () {
      mensajes.removeAt(0);
      watcher.dispatch();

      print('paso del mensajes, first');
      print(mensajes);
    });
  }
}
      </script>
    </element>

我可以在我的浏览器上正确地看到所有这些打印件，但列表保持不变，没有任何反应。当我为一个字符串更改该列表并在调用 informar 方法时分配值时，UI 会刷新，但当我使用此列表时，什么也没有。

浏览器没有显示任何错误，我从外部调用 informar，从层次结构上的 Web 组件。

有什么提示吗？

Answer 1

看看Making a Map or a List observable in Web UI .

基本上，您想使用新的(到目前为止，大部分未记录)toObservable() 函数使列表可观察。 Observable 正在取代 watcher.dispatch() 作为观察对象变化的首选方式。