在 Angular Dart 中将数据绑定到 Map
在 Angular Dart 中将数据绑定到 Map
我正在尝试实现对复选框列表中多个项目进行检查的功能。我正在使用一个Map来存储数据及其选择/未选择的状态。
List
{'fruit': 'apple', 'selected': true},
{'fruit': 'banana', 'selected': true},
{'fruit': 'kiwi', 'selected': false}
];
复选框最初显示时，已正确呈现选中/未选中的状态，但是当我切换一个复选框的选中状态时，fruits map不会更新。我应该如何在这里正确地创建双向绑定？
以下是我的.dart文件：
import 'package:angular/angular.dart';
@NgDirective(
selector: '[my-controller]',
publishAs: 'ctrl'
)
class MyController {
List
{'fruit': 'apple', 'selected': true},
{'fruit': 'banana', 'selected': true},
{'fruit': 'kiwi', 'selected': false}
];
}
main() {
ngBootstrap(module: new Module()..type(MyController));
}
这是视图标记：
-
{{item['fruit']}}
{{ctrl.fruits}}
问题出现的原因是在Angular Dart中，绑定到Map时，如果没有进行深度监听（deep watch），Angular只会看到数组中的三个对象，而不会进一步查看这些对象的属性。解决方法是进行深度监听，让Angular能够看到数组中的对象和它们的属性，并在属性变化时进行更新。
在给出的代码中，作者给出了一个使用原生JavaScript编写的JSFiddle示例，展示了如果进行深度监听，Angular将能够正确更新数组中的对象属性。示例中，通过在控制器中定义一个printFruits函数，返回数组的JSON字符串表示，并在HTML中绑定该函数的结果，可以看到当复选框选中时，printFruits函数的结果也会正确更新。
还有可能的解决方法，即将对ctrl.fruits的访问移到与运行复选框的控制器相同的div中，这样可能可以确保正确进行深度监听。
解决问题的方法是进行深度监听，让Angular能够正确识别数组中对象的属性，并在属性变化时进行更新。
问题的出现原因是在Angular Dart中，将数据绑定到Map对象时，无法自动更新视图。解决方法是使用定时器定期更新数据或手动更新数据。
在编辑2中，提供了两个可用的解决方案。第一个解决方案是使用{{ctrl.fruits.toString()}}将Map对象转换为字符串，然后将其显示在视图中。第二个解决方案是使用<div ng-repeat="item in ctrl.fruits">{{item['fruit']}} - {{item['selected']}}通过ng-repeat指令循环遍历Map对象的键值对，并将其显示在视图中。
在编辑中，提供了一个稍微改进但仍然不完美的解决方法。通过在update()方法中先将fruits赋值为null，然后通过定时器将fruits赋值为之前保存的tmp对象，从而实现数据的更新。在视图中，使用<input type="checkbox" ng-model="item['selected']" ng-click="ctrl.update()"/>来监听复选框的点击事件，从而触发数据更新。
在第一次编辑中，通过添加定时器new Timer.periodic(new Duration(milliseconds: 2000), (t) => print(fruits = new List.from(fruits)))来定期更新数据，并将更新后的数据打印出来。作者还没有找到无需使用定时器的方法，并猜测可能是因为只能识别到fruits成员的更改，而无法识别到列表中元素的更改。可能与How do I watch elements of an AngularDart collection?有关。
以上内容介绍了在Angular Dart中将数据绑定到Map对象时出现的问题以及解决方法。通过定时器或手动更新数据，可以解决无法自动更新视图的问题。
