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方法绑定似乎要求发生所有类型的奇怪事情。

从我看到的，你的意图似乎是以不同的随机颜色显示字符串的所有字符 - 但不改变颜色（意味着字符不应该不断改变颜色） - 是吗？< / p>

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

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

Answer 2

修改
这个问题很好地解决了这个问题： AngularDart custom filter call() method required to be idempotent?

另类方法：

<强> ORIGINAL
我不确定你想要达到的目的但也许它有帮助

结果截图：

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