html - 无法在angular2中分配ngFor中列表元素的属性

Question

我有以下代码

<li data-target="#myCarousel" *ngFor="#data of lengthArray"  data-slide-to="data.index" class="data.class"></li>

我从一个长度为 2 的 http 服务获取数据 lengthArray，我得到了 2 个 li 元素，但属性没有分配给它们

我什至尝试像这样分配 [data-slide-to]="data.index" 并把 # even ，所有可能的方式

在浏览器检查元素中，我可以看到

<li data-target="#myCarousel" data-slide-to="data.index" class="data.class"></li>

我期望在哪里

<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1" class=""></li>

根据我的 lengthArrat 中的数据，即数据

Answer 1

它应该是

 [attr.data-slide-to]="data.index" [class]="data.class"

没有[]或{{}}Angular 根本不评估该值。

data-slide-to="data.index" class="data.class"

因此按原样添加。

Angular2 默认绑定到属性。任何元素都没有data-slide-to属性，除非它是 Angular2 组件并且它具有@Input('data-slide-to')

要绑定到属性，请使用

[attr.attrname]="value"

或者

attr.attrname="{{value}}"

绑定到属性而不是属性，并指示 Angular2 需要解析该值。