2

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

组件调用如下所示：

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

除了我定义的吸气剂之外，我不清楚这里正在观看什么。如果我将涉及 getter 的代码留Random在 getter 中，而只是返回一个硬编码的字符串，则错误消息就会消失。

知道这里有什么问题吗？

4

2 回答 2

2

用随机返回值绑定 getter 方法似乎要求发生各种奇怪的事情。

据我所知，您的意图似乎是以不同的随机颜色显示字符串的所有字符 - 但不改变颜色（意味着字符不应该不断改变颜色） - 对吗？

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

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

于 2014-01-11T01:55:38.043 回答
1

编辑
这个问题对这个问题有很好的回答： AngularDart custom filter call() method required to be idempotent?

和替代方法：

原创
我不确定您要达到什么目标，但无论如何它可能会有所帮助

结果截图：

截屏

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;
}
于 2014-01-11T10:12:31.890 回答