如何在Angular2中设置动态#id(*ngFor)并从中获取取值？

在Angular2中，可以使用动态#id(*ngFor)来设置一个唯一的标识符，并从中获取取值。具体步骤如下：

在HTML模板中，使用*ngFor指令来循环遍历一个数组或对象，并设置一个动态的#id。例如：

<div *ngFor="let item of items; let i = index" [attr.id]="'item-' + i">
  {{ item }}
</div>

在上述代码中，我们使用了attr.id来动态设置div元素的id属性，值为"item-"加上当前索引i的值。

在组件中，可以使用@ViewChild装饰器来获取动态设置的#id的值。例如：

import { Component, ViewChild, ElementRef } from '@angular/core';

@Component({
  selector: 'app-example',
  template: `
    <div *ngFor="let item of items; let i = index" [attr.id]="'item-' + i">
      {{ item }}
    </div>
  `
})
export class ExampleComponent {
  @ViewChild('item-0') item0: ElementRef;
  @ViewChild('item-1') item1: ElementRef;
  // 可以根据需要继续定义其他的ViewChild

  items = ['item1', 'item2', 'item3'];

  ngAfterViewInit() {
    console.log(this.item0.nativeElement.textContent); // 输出：item1
    console.log(this.item1.nativeElement.textContent); // 输出：item2
    // 可以根据需要继续获取其他的动态#id的值
  }
}

在上述代码中，我们使用@ViewChild装饰器来获取动态设置的#id的值。通过指定对应的#id名称，可以在组件中获取到对应的元素引用。在ngAfterViewInit生命周期钩子函数中，可以通过this.item0.nativeElement来访问元素的属性和方法。

需要注意的是，每个动态#id对应的ViewChild需要分别定义，以便在组件中获取到对应的元素引用。

以上是在Angular2中设置动态#id(*ngFor)并从中获取取值的方法。在实际应用中，可以根据具体需求进行适当的调整和扩展。

腾讯云相关产品和产品介绍链接地址：