dart - AngularDart 组件无法与 ng-repeat 一起使用，但其他标签可以

Question

我可以使用输入标签执行 ng-repeat，如下所示。

<input ng-repeat="r in cmp.rooms track by $index" type="text" value="{{r.name}}" />

我制作了一个名为 <radio_component> 的 AngularDart 组件，所以并排。

<input ng-repeat="r in cmp.rooms track by $index" type="text" value="{{r.name}}" />
<radio_component ng-repeat="r in cmp.rooms track by $index" 
                        textLabel="{{r.name}}"></radio_component>

textLabel 在我的组件中定义为

@NgAttr('textLabel')
String textLabel;

现在，如果我设置 textLabel="HELLO" ，它可以处理文本，但它不适用于 textLabel="{{r.name}}" 。我不明白为什么？如果我包括 textLabel="{{r.name}}"它不起作用。有什么线索吗？

---

为了澄清问题并希望使其可重现，这里有一些测试文件。这两个文件是test_component.dart和test_component.html

library minutesheet_component_radiobox;

import 'package:angular/angular.dart';
import 'dart:html';

@Component(
    cssUrl: 'http://localhost:8888/assets/css/admin/module.admin.stylesheet-complete.sidebar_type.no-sidebar.min.css',
    publishAs: 'test_component',
    selector: 'test_component',
    templateUrl: 'packages/minutesheet/component/test_component.html')

class TestComponent extends AttachAware with ShadowRootAware {

  // Chose either NgAttr or NgOneWay
  //@NgAttr("textLabel")
  //String textLabel;

  String _textLabel;
  @NgOneWay('textLabel') 
  String get textLabel => _textLabel; 

  set textLabel(String val) {
    print(val); _textLabel = val; 
  }

  void attach() {
  }

  void onShadowRoot(ShadowRoot shadowRoot) {
  }
}

该组件的 html 文件。

<div class="radio radioCheckbox">
<label class="radio-custom">
<i class="fa fa-circle-o" style="padding-top:1px"></i>
{{test_component.textLabel}}
</label>
</div>

使用这两个文件，我发现当我使用该组件时，以下情况成立。

如果使用 @NgOneWay，那么如果我使用 ng-repeat，则 null 会传递到设置的 textLabel 中，如下所示:

<test_component ng-repeat="r in cmp.rooms track by $index" textLabel="{{r.name}}" />

如果使用 @NgOneWay 传递字符串，则 null 也会传递到设置的 textLabel 中:

<test_component ng-repeat="r in cmp.rooms track by $index" textLabel="HELLO" />

如果使用 @NgAttr 并传递变量 {{r.name}}，则 HTML 页面上不会显示任何值。

如果使用 @NgAttr 并传递“HELLO”，则 HELLO 一词将显示在 HTML 页面上。

---

如果使用 @NgOneWay 并在 textLabel 中使用 r.name 实际上会传入值以在组件上设置 textLabel，但我在输出 HTML 中看不到该值。

<test_component ng-repeat="r in cmp.rooms track by $index" textLabel="r.name" />

如果使用 @NgTwoWay 并在 textLabel 中使用 r.name 实际上会传入值以在组件上设置 textLabel 并且我确实在 HTML 输出中看到了该值。

<test_component ng-repeat="r in cmp.rooms track by $index" textLabel="r.name" />

好的，@NgTwoWay 可以工作，但现在如果我这样做，我无法将普通字符串传递到测试组件中。如果我有的话。

<test_component textLabel="Hello there" />

然后我收到此错误。

解析器错误:[Hello there] 中的第 7 列“there”存在意外标记

也许这个问题现在已经解决了，我不确定这是否是它应该如何工作，或者是否由于其他一些代码使其工作奇怪而在我的应用程序中以这种方式工作。无论如何，对我来说，现在是我可以让我的应用程序运行的时候了，所以我暂时很高兴。

---

最后感谢 Gunter，如果组件的属性被命名为 text-label 并且 NOT textLabel AND @NgTwoWay 被使用，它在第一种情况下会按预期工作。所以它解决了。

这个故事的寓意是，不要使用任何大写字符来创建组件属性。 (？)

Answer 1

@NgAttr 不适用于驼峰式大小写属性名称。请参阅下面的讨论。