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

TA貢獻(xiàn)1874條經(jīng)驗(yàn) 獲得超12個(gè)贊
我認(rèn)為執(zhí)行您在內(nèi)部共享的打字稿代碼部分ngAfterViewInit()
是實(shí)現(xiàn)您想要的目標(biāo)的最佳方式。
添加回答
舉報(bào)