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");
    })
  }
}

输出: