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 也会传递到 set textLabel：

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

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

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

---

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

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

如果在 textLabel 中使用 @NgTwoWay 并使用 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 列有一个意外的标记

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

---

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

故事的寓意是，不要使用任何大写字符来制作组件属性。 (?)

Answer 1

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