getElementById 在 ngFor 循环元素中返回“null”

Question

所以我目前正在使用 Ionic-Angular 开发一个应用程序。
我正在使用 Angular *ngFor 创建许多要在滑块中显示的对象，如下所示：

<ion-slides #theSlides [options]="sliderConfig"   id="peerSlide" >
    <ion-slide *ngFor="let peer of peers; let i = index">
       <img id="{{'x' + i}}">
       <p>{{peer.firstname}}</p>
       <p>{{peer.lastname}}</p>
       <p>{{peer.status}}</p>
   </ion-slide>
</ion-slides>

ngFor 循环工作正常，但是当我尝试通过 getElementById 访问内部图像元素以设置图像源时，它返回 null。这是将对等对象推入对等数组的类型脚本代码：

this.peer_profile_ready.subscribe(
  () => {
      var peer = {
      id: 1,
      firstname: this.peerFirstName,
      lastname: this.peerLastName,
      status: this.peerStatus,
      }
  
    this.peers.push(peer);
    var peerImage = < HTMLImageElement > document.getElementById("x0");
    console.log('peerImage', peerImage)})

所以现在控制台返回 null。如果您能告诉我这里出了什么问题以及访问 ngFor 循环内的元素的最佳方法是什么，我将不胜感激。谢谢

Answer 1

您的代码的问题：

Angular 没有机会在两条指令之间运行其“检查修改数据并更新 DOM”处理：

    this.peers.push(peer);
    var peerImage = < HTMLImageElement > document.getElementById("x0");

所以当你请求 element 时x0，它仍然不存在于 DOM 中。

您必须等待下一个ngAfterViewInit()事件才能使用包含 img 节点的 DOM 执行代码x0。有关更多详细信息，请参阅角度生命周期挂钩。

你可能应该做什么：

如果您需要更新节点的字段<img>，您可能应该让数据层提供必要的数据，而不是在数据层中“注入”html 节点并从 javascript 代码更新其字段。

例如：如果您需要更新图像src，请src在数据中添加一个字段：

• 示例 1：在“peer”对象中添加“src”字段

// in your javascript code :
 var peer = {
      id: 1,
      src: '/starting/img.png',
      ...
}

// in your html template :
<img id="{{'x' + i}}" [src]="peer.src">

• src示例 2：让一个函数返回from的值peer：

// in your javascript code :
getPeerImage(peer) {
    if (this.state[peer.id] === "ok") {
        return "ok.png";
    } else {
        return "questionmark.png";
    }
}

// in your template :
<img id="{{'x' + i}}" [src]="getPeerImage(peer)">