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。 这是将 peer 对象推送到 peers 数组的类型脚本代码：

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

所以当你请求元素x0 ，它仍然没有出现在 DOM 中。

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

---

你可能应该做的：

如果您需要更新<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">

• 示例 2：让函数从peer返回src的值：

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

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

Answer 2

我认为在ngAfterViewInit()执行您共享的ngAfterViewInit()代码部分是实现您想要的最佳方式。