使用嵌套的ng重复"Observer reaction functions should not change model"是什么意思?



这里是代码的简化版本,即使生成的HTML看起来很好,我也会得到一个记录错误的代码。这个异常意味着什么?为什么我得到它?

index . html :

<!DOCTYPE html>
<div ng-app main>
  <div ng-repeat="a in ctrl.listOfA">
    <strong>{{ a }}</strong>
    <div ng-repeat="b in ctrl.listOfB(a)">
      {{ b }}
    </div>
  </div>
</div>
<script type="application/dart" src="main.dart"></script>
<script src="packages/browser/dart.js"></script>

主要。飞镖:

import 'package:angular/angular.dart';  /* 0.9.10 */
@NgController(selector: '[main]', publishAs: 'ctrl')
class MainController {
  final listOfA = new List.generate(2, (i) => 'a$i');
  listOfB(a) => new List.generate(2, (i) => 'b$i').map((e) => '$a-$e');
}
void main() {
  ngBootstrap(module: new Module()
    ..type(MainController)
  );
}

记录的错误:

Observer reaction functions should not change model. 
These watch changes were detected: ctrl.listOfB(a): (a0-b0, a0-b1) <= (a0-b0, a0-b1); ctrl.listOfB(a): (a1-b0, a1-b1) <= (a1-b0, a1-b1)
These observe changes were detected: 
STACKTRACE:
#0      RootScope.flush.<anonymous closure> (package:angular/core/scope.dart:554:11)
#1      RootScope.flush (package:angular/core/scope.dart:560:9)
#2      RootScope.flush (package:angular/core/scope.dart:561:7)
#3      RootScope.flush (package:angular/core/scope.dart:561:7)
#4      apply (package:angular/core/scope.dart:262:18)
#5      _rootRun (dart:async/zone.dart:710)
#6      _rootRun (dart:async/zone.dart:711)
#7      _rootRun (dart:async/zone.dart:711)
#8      _ZoneDelegate.run (dart:async/zone.dart:440)
#9      NgZone._finishTurn (package:angular/core/zone.dart:96:21)
#10     NgZone._onRunBase (package:angular/core/zone.dart:61:43)
#11     _onRun (package:angular/core/zone.dart:66:15)
#12     _ZoneDelegate.run (dart:async/zone.dart:440)
#13     _CustomizedZone.run (dart:async/zone.dart:650)
#14     NgZone.run (package:angular/core/zone.dart:148:35)
#15     ngBootstrap (package:angular/bootstrap.dart:92:18)
#16     main (http://127.0.0.1:3030/xxxx/web/test/main.dart:13:14)

Angular在表达式中只支持纯函数。我猜这是从0.9.10开始的,因为最近已经有一个类似的问题,它在更新后停止工作。

ctrl.listOfB(a)

对于相同的参数应该总是返回相同的结果,

或者即使结果相同,原因可能是ctrl.listOfB(a)总是返回相同结果的新实例。Angular 0.9.10也不喜欢这样。

它重复计算表达式,如果每次抛出都收到新结果,则返回。

我认为解决方案是缓存结果,并从缓存中返回,如果已经可用。

最新更新