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 元素。但是不！我总是得到 "undefined" 的 return。所以似乎 DOM 元素尚不可用，我如何正确地 "wait" 使该元素存在并可供我的组件访问？

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

感谢您的帮助！

安迪

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

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

Angular: get new DOM element from ngFor loop in component

dom

element

typescript

angular