Angular 2，动态绑定属性名称

Question

我有一个像这样的代码块angular 2：

<div *ngFor="let elm of elms; let i = index" [attr.name]="name" text-center>
    {{elm }}
</div>

工作正常。
但是，当我想动态设置基于索引的属性名称name-1="name" name-2="name"时，我不知道该怎么做。
我尝试了[attr.name-{{i}}]="name"或[attr.name- + i]="name"，但它不起作用。有什么办法吗？
非常感谢。

Answer 1

首先感谢此问题的 OP 。我最终通过解决这个问题来学习新事物。下面解释我是如何实现的。

重要提示：您无法将动态属性绑定到组件范围。要实现这一点，您需要将每个 div 作为动态组件并进行编译。有点hacky我猜。

模板：

<div #looped *ngFor="let elm of elms; let i = index;" text-center>
  {{elm }}
</div>

并在组件导入中实现 AfterViewInit 和 ViewChildren 装饰器来获取子元素及其在渲染时的更改：

import { Component, ViewChildren, QueryList, AfterViewInit } from '@angular/core';

组件：

export class ExamplePage implements AfterViewInit {
  elms : Array<string> = ["d1", "d2", "d3"]
  @ViewChildren('looped') things: QueryList<any>;
  constructor() { }

  ngAfterViewInit() {
    this.things.forEach((t, index) => {
      let el : HTMLDivElement = t.nativeElement;
      el.setAttribute("name-" + index , "dynamicAttrString");
    })
  }
}

<强>输出：

Answer 2

我不知道天气是否有可能但是我已经有了替代解决方案

<div *ngFor="let elm of elms; let i = index" [attr.name]="{id : index, data : name}">{{item}}</div>

然后，您将使用 id 和数据键获取对象，希望这会有所帮助。