Angular：从组件中的ngFor循环获取新的DOM元素

Question

我没能完成一件理论上应该很容易的事情，这真的让我很烦恼。

所以基本上，我有一个为数组提供一些数据的服务，让我们将它简化为一个字符串数组：

public myList: string[] = ['lorem', 'ipsum'];

在我的模板中，我为数组中的每个条目创建列表项并分配 ID：

<ul id="listGroup">
  <li ngFor="let item of myList" [attr.id]="'item-'+item">{{ item }}</li>
</ul>

现在，我有一些附加功能，可以扩展列表并添加新项目。 接下来我基本上想做的是，访问由于将新项目推送到列表中而创建的每个新 DOM 元素。

我已经尝试过使用 ElementRef 和 nativeElement 的 querySelector 方法。 假设我已经在我的组件中订阅了一些东西，它会通知我数组中新添加的项目，并且它还提供了相应的值，以便我可以编译正确的元素 ID：

this.elementRef.nativeElement.querySelector('#item-'+item);

我把它放在一个 ngAfterViewInit() 生命周期钩子中，并假设我会找到每个新添加的 DOM 元素。但是不行！我总是得到“未定义”的回报。因此，似乎 DOM 元素尚不可用，我将如何正确“等待”该元素存在并可供我的组件访问？

我希望这足以说明我的问题是什么，如果不是，我可能需要添加更多代码，虽然在移动设备上有点。

感谢您的帮助！

安迪

Answer 1

这是一个如何获取元素引用的示例。你可以适应你的情况：

Typescript 指令

  .....

  @Input('focusOnInit') priority: number = 0;

  static instances: FocusOnInitDirective[] = [];

  constructor(public renderer: Renderer, public elementRef: ElementRef) {
  }

  ngOnInit(): void {
    FocusOnInitDirective.instances.push(this)
  }

 ngAfterViewInit(): void {
    setTimeout(() => {
      FocusOnInitDirective.instances.splice(FocusOnInitDirective.instances.indexOf(this), 1);
    });

    if (FocusOnInitDirective.instances.every((i) => this.priority >= i.priority)) {
      this.renderer.invokeElementMethod(
        this.elementRef.nativeElement, 'focus', []);
    }
  }
}

HTML

<button type="button" (click)=add()>Add</button>
<div *ngFor="let input of inputs">
  <input type="text" focusOnInit="3">
  <input type="text" focusOnInit="2">
  <input type="text" focusOnInit="1">
</div>

组件打字稿：

  ....
  inputs = [];

  add() {
    this.inputs.push(this.inputs.length+1);
  }

还有plunker