为了账号安全,请及时绑定邮箱和手机立即绑定

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

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

慕容森 2023-04-14 15:12:39
所以我目前正在开发一个使用 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 循环内元素的最佳方式是什么,我将不胜感激。谢谢
查看完整描述

2 回答

?
小怪兽爱吃肉

TA贡献1852条经验 获得超1个赞

您的代码问题:


angular 没有机会在两条指令之间运行其“检查修改后的数据和更新 DOM”处理:


    this.peers.push(peer);

    var peerImage = < HTMLImageElement > document.getElementById("x0");

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


您将不得不等待下一个ngAfterViewInit()事件让您的代码使用包含您的x0img 节点的 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:让函数返回srcfrom的值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)">


查看完整回答
反对 回复 2023-04-14
?
HUWWW

TA贡献1874条经验 获得超12个赞

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



查看完整回答
反对 回复 2023-04-14
  • 2 回答
  • 0 关注
  • 130 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信