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传递给set 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并传递＆＃34; HELLO＆＃34;然后在HTML页面上显示HELLO这个词。

如果使用@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" />

然后我收到了这个错误。

解析器错误：＆＃39;那里＆＃39;是[Hello there]

中第7列的意外标记

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

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

故事的寓意是，不要使用任何大写字符制作组件属性。（？）

Answer 1

@NgAttr不适用于驼峰案例属性名称。见下面的讨论。

AngularDart组件不使用ng-repeat而是使用其他标签

1 个答案: