时间戳

首页 > 解决方案 > 使用 document.(property) 选择其他 li 旁边的 li 元素

angular - 使用 document.(property) 选择其他 li 旁边的 li 元素

问题描述

我正在使用一个名为 ably.io 的发布/订阅解决方案来订阅和发布实时值。我设置它的方式是为 ngFor 中的每个列表分配一个动态 ID。这样我就可以识别正确的列表以从 ably.io subscribe 分配一个值

document.getElementById(message.data.auctionId).innerHTML = "$" + message.data.lastBid;

这完美地工作。我现在只需要访问它旁边的 li 以便我可以给它正确的值。

目标是从 ably.io 中获取 lastBidderName 并将其分配给动态拍卖 ID 列表，以便它也实时更新，而不仅仅是在浏览器刷新时更新。

为了使其工作，我需要在找到正确的拍卖 ID 后访问名为 lastBidderName 的子元素类。然后我可以将 ably.io 中的 message.data.lastBidderName 分配给它。

如何更改下面的第二个示例以正确访问子元素？

channel.subscribe(message => {

  document.getElementById(message.data.auctionId).innerHTML =
    "$" + message.data.lastBid;

    document.querySelector(
    "message.data.auctionId > lastBidderName"
  ).innerHTML = message.data.lastBidderName;

});

html

<li>Current Bid:
    <span id="{{auction.id}}" class="currentBid">
      ${{auction.currentBid}}
    </span>
</li>
<li>Bidder: 
    <span id="lastBidderName">
       {{auction.lastBidderName}}
    </span>
 </li>

标签： angulartypescript

解决方案

我建议您在这样的两个项目上添加 ID

<li>Current Bid:
    <span id="auction-{{auction.id}}" class="currentBid">
      ${{auction.currentBid}}
    </span>
</li>
<li>Bidder: 
    <span id="bidder-{{auction.id}}" class="lastBidderName">
       {{auction.lastBidderName}}
    </span>
 </li>

并在 .ts

channel.subscribe(message => {

  document.getElementById(
`auction-${message.data.auctionId}`).innerHTML =
    "$" + message.data.lastBid;

    document.getElementById(
   `bidder-${message.data.auctionId}`
  ).innerHTML = message.data.lastBidderName;

});

还有一个问题。

为什么不更新动作对象？

推荐阅读