2

String を受け取り、それを s のリストに変換するコンポーネントを作成しています<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:
...

私が定義しているゲッターを超えて、ここで何が監視されているのかは私には明らかではありません。getter にを含むコードを残し、Randomハードコーディングされた文字列を返すだけで、エラー メッセージは表示されなくなります。

ここで何が間違っているのですか？

4

2 に答える 2

1

EDIT
この質問には、問題に対する良い答えがあります: AngularDart カスタム フィルター call() メソッドはべき等である必要がありますか?

そして別のアプローチ：

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