Angular Dart中与观察者有关的令人惊讶的错误消息

Question

我正在编写一个接受String并将其转换为<span>列表的组件。 每个<span>都有一个String字符，并分配有随机颜色。

组件调用如下所示：

<span ng-repeat="char in ctrl.chars" style="color: {{ctrl.randomColor}};">
  {{char}}
</span>

组件定义如下所示：

import 'package:angular/angular.dart';
import 'dart:math';

@NgComponent(
    selector: 'tokens',
    templateUrl: './component.html',
    cssUrl: './component.css',
    publishAs: 'ctrl',
    map: const {
      'text' : '@text',
    }
)
class TokensComponent {
  String text;

  List<String> get chars =>  text.split('');

  String get randomColor {
    var colors = ['red', 'green', 'yellow', 'blue'];
    return colors[new Random().nextInt(colors.length)];
  }
}

这可行，但是会产生错误：

5 $digest() iterations reached. Aborting!
Watchers fired in the last 3 iterations:
...

对我来说，目前尚不清楚我正在定义的吸气剂之外正在观察什么。 如果我将涉及Random的代码留在getter中，而仅返回一个硬编码的String，则错误消息就会消失。

知道这里有什么问题吗？

Answer 1

将getter方法与随机返回值绑定在一起，似乎要求发生各种奇怪的事情。

从我看来，您的意图似乎是用不同的随机颜色显示字符串的所有字符-但不能更改颜色（这意味着字符不应不断更改其颜色）-是吗？

不幸的是， <span>不仅是使用randomColor的当前返回值randomColor ，然后被遗忘了-绑定属性的优点是，对属性的更改会反映在视图中。 当然，由于“属性”是一个吸气剂，并且具有随机返回值，因此它会不断变化，从而导致视图不断更新。

如果不会发生此错误以防止此无限循环，则所有字符可能都具有相同（快速变化）的颜色。

Answer 2

编辑
这个问题可以很好地回答这个问题： AngularDart自定义过滤器call（）方法需要幂等吗？

和替代方法：

原版的
我不确定您要达到什么目标，但无论如何还是有帮助的

结果截图：

library main;

import 'dart:math';
import 'package:angular/angular.dart';
import 'package:di/di.dart';


class MyAppModule extends Module {
  MyAppModule() {
    type(TokensComponent);
  }
}

void main() {
  ngBootstrap(module: new MyAppModule());
}


@NgComponent(
    selector: 'tokens',
    template: '''<span ng-repeat="item in ctrl.items" style="color: {{item.color}};">
  {{item.char}}
</span>''',
    //cssUrl: './component.css',
    publishAs: 'ctrl',
    map: const {
      'text' : '@text',
    }
)
class TokensComponent {
  String text = 'abcdefg';

  List<Item> items = new List<Item>();
  TokensComponent() {
    text.split('').forEach((e) => items.add(new Item(e, randomColor)));
  }

  var colors = \['red', 'green', 'yellow', 'blue'\];

  String get randomColor {
    return colors\[new Random().nextInt(colors.length)\];
  }
}

class Item {
  Item(this.char, this.color);
  String char;
  String color;
}