亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

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 關注
  • 158 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號