第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問題,去搜搜看,總會(huì)有你想問的

getElementById 在 ngFor 循環(huán)元素中返回“null”

getElementById 在 ngFor 循環(huán)元素中返回“null”

慕容森 2023-04-14 15:12:39
所以我目前正在開發(fā)一個(gè)使用 Ionic-Angular 的應(yīng)用程序。我使用 Angular *ngFor 創(chuàng)建許多對(duì)象以在滑塊中顯示,如下所示:<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 循環(huán)工作正常,但是當(dāng)我嘗試通過 getElementById 訪問內(nèi)部圖像元素以設(shè)置圖像源時(shí),它返回 null。這是將對(duì)等對(duì)象推送到對(duì)等數(shù)組的類型腳本代碼: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)})所以現(xiàn)在控制臺(tái)返回 null。如果您能說出這里出了什么問題,以及訪問 ngFor 循環(huán)內(nèi)元素的最佳方式是什么,我將不勝感激。謝謝
查看完整描述

2 回答

?
小怪獸愛吃肉

TA貢獻(xiàn)1852條經(jīng)驗(yàn) 獲得超1個(gè)贊

您的代碼問題:


angular 沒有機(jī)會(huì)在兩條指令之間運(yùn)行其“檢查修改后的數(shù)據(jù)和更新 DOM”處理:


    this.peers.push(peer);

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

所以當(dāng)你請(qǐng)求 element 時(shí)x0,它仍然不在 DOM 中。


您將不得不等待下一個(gè)ngAfterViewInit()事件讓您的代碼使用包含您的x0img 節(jié)點(diǎn)的 DOM 執(zhí)行。有關(guān)詳細(xì)信息,請(qǐng)參閱角度生命周期掛鉤。


你可能應(yīng)該做什么:


如果您需要更新節(jié)點(diǎn)的字段<img>,您可能應(yīng)該讓數(shù)據(jù)層提供必要的數(shù)據(jù),而不是在數(shù)據(jù)層中“注入”html 節(jié)點(diǎn)并從 javascript 代碼更新其字段。


例如:如果您需要更新src圖像的,請(qǐng)src在數(shù)據(jù)中添加一個(gè)字段:


示例 1:在“peer”對(duì)象中添加“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:讓函數(shù)返回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)">


查看完整回答
反對(duì) 回復(fù) 2023-04-14
?
HUWWW

TA貢獻(xiàn)1874條經(jīng)驗(yàn) 獲得超12個(gè)贊

我認(rèn)為執(zhí)行您在內(nèi)部共享的打字稿代碼部分ngAfterViewInit()是實(shí)現(xiàn)您想要的目標(biāo)的最佳方式。



查看完整回答
反對(duì) 回復(fù) 2023-04-14
  • 2 回答
  • 0 關(guān)注
  • 168 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)