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”处理：&nbsp; &nbsp; this.peers.push(peer);&nbsp; &nbsp; var peerImage = < HTMLImageElement > document.getElementById("x0");所以当你请求 element 时x0，它仍然不在 DOM 中。您将不得不等待下一个ngAfterViewInit()事件让您的代码使用包含您的x0img 节点的 DOM 执行。有关详细信息，请参阅角度生命周期挂钩。你可能应该做什么：如果您需要更新节点的字段<img>，您可能应该让数据层提供必要的数据，而不是在数据层中“注入”html 节点并从 javascript 代码更新其字段。例如：如果您需要更新src图像的，请src在数据中添加一个字段：示例 1：在“peer”对象中添加“src”字段// in your javascript code :&nbsp;var peer = {&nbsp; &nbsp; &nbsp; id: 1,&nbsp; &nbsp; &nbsp; src: '/starting/img.png',&nbsp; &nbsp; &nbsp; ...}// in your html template :<img id="{{'x' + i}}" [src]="peer.src">示例 2：让函数返回srcfrom的值peer：// in your javascript code :getPeerImage(peer) {&nbsp; &nbsp; if (this.state[peer.id] === "ok") {&nbsp; &nbsp; &nbsp; &nbsp; return "ok.png";&nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; return "questionmark.png";&nbsp; &nbsp; }}// in your template :<img id="{{'x' + i}}" [src]="getPeerImage(peer)">

Answer 2

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