Question

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

<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>

我可以在浏览器上正确看到所有这些打印件，但列表保持不变，没有任何反应。当我更改String的列表并在调用信息器方法时分配值时刷新UI但是当我使用此列表时，什么都没有。

浏览器不会显示任何错误，而且我会从外部通过网络组件调用信息提供者。

任何提示？

Answer 1

查看Making a Map or a List observable in Web UI。

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

dart web组件不刷新UI上的List

1 个答案: