angular - *ngFor 带索引

Question

我有 Angular 4 应用程序，我想在其中从 *ngFor 获取列的索引 并将其附加到 HTML 元素，我已经尝试了 angular.io 中的示例但它给了我一个错误

代码:

<li *ngFor="let col of Descriptive_FieldsMap;let i = index;">
  <a class="ShowHideColumns" data-columnindex="{{i + 1}}">
      {{col.FieldName}}
     <i id="data-table-col-{{i + 1}}" class="fa fa-minus-square pull-right">
     </i>
  </a>
</li>

错误:

Error: Template parse errors:↵Can't bind to 'columnindex' since it isn't a known property of 'a'. ("tive_FieldsMap;let i = index;">
↵

Answer 1

自 data-columnindex不是 <a> 的原生属性标记你必须采取另一种方法。与 attr 绑定(bind)指令:

<a class="ShowHideColumns" [attr.data-columnindex]="i + 1">

https://angular.io/docs/ts/latest/guide/template-syntax.html#!#other-bindings