Aframe 数据绑定不适用于A-frame标记属性

我正在用和制作一个WebVR应用程序。我从资产中加载一些静态JSON数据，并将其绑定到一个A-frame元素。下面是我的JSON数据示例

{
“id”：4，
“图像”：“，
“位置”：“字体”，
“nextScenes”：[
3.
5.
],
“热点”：[
{
“id”：“obj1”，
“地点”：“23251305-2400”，
“旋转”：“-5-50-5”，
“比例”：“150”，
“标题”：“，
“正文”：”
},
{
“id”：“obj2”，
“地点”：“3145890-2175”，
“旋转”：“-5-50-5”，
“比例”：“150”，
“标题”：“，
“正文”：”
}
]
}

我将用以下代码加载HTML代码中的

热点

：

请注意，

currentData

等于上面的JSON代码，并且

currentImageSource

包含图像的位置

上面代码的问题是属性

位置

、

旋转

和

缩放

无法绑定。渲染输出中的变量为空，但

ng reflect-…

属性不为空

另外，如果我用ctrl+alt+I检查代码，对象会得到

a-entity

标记的默认值

更新一个：属性

id

的数据绑定工作正常

更新二：在这里，您可以在我的浏览器中看到输出：

退出虚拟现实

你能在我的代码中找到错误吗

---

提前感谢

不要担心在DOM检查器中看到什么。您正在绑定的内容仍然会影响场景本身，对吗？如果是这样的话，我想这会回答：

出于性能原因，A-Frame不会使用组件数据更新DOM。使用调试组件启用组件到DOM的序列化

默认情况下，出于性能原因，A-Frame不会使用组件数据更新DOM。如果打开浏览器的DOM inspector，我们将看到许多实体将只显示组件名称：

组件数据存储在内部。更新DOM需要CPU时间将内部存储的组件数据转换为字符串。但是，当我们希望看到DOM更新以进行调试时，可以将调试组件附加到场景。组件将在尝试序列化到DOM之前检查调试组件是否已启用。然后，我们将能够在DOM中查看组件数据：

确保此组件在生产中未处于活动状态

---

不要担心在DOM检查器中看到什么。您正在绑定的内容仍然会影响场景本身，对吗？如果是这样的话，我想这会回答：

出于性能原因，A-Frame不会使用组件数据更新DOM。使用调试组件启用组件到DOM的序列化

默认情况下，出于性能原因，A-Frame不会使用组件数据更新DOM。如果打开浏览器的DOM inspector，我们将看到许多实体将只显示组件名称：

组件数据存储在内部。更新DOM需要CPU时间将内部存储的组件数据转换为字符串。但是，当我们希望看到DOM更新以进行调试时，可以将调试组件附加到场景。组件将在尝试序列化到DOM之前检查调试组件是否已启用。然后，我们将能够在DOM中查看组件数据：

确保此组件在生产中未处于活动状态

---

在尝试了一种变通方法之后，我找到了一种有效的解决方案。这段代码的问题是它没有使用数据绑定，我认为它的性能不如数据绑定，但A-frame不支持它

在这里，您可以找到我在typescript代码中添加的代码：

ngAfterViewInit（）：void{
for（设i:number=this.currentData.hotspots.length；i--；）{
设spot:any=this.currentData.hotspots[i]，
el:any=document.getElementById（spot.id）；
el.setAttribute（“位置”，点位置）；
el.setAttribute（“旋转”，点旋转）；
el.setAttribute（“比例”，点比例）；
}
}

如果我给每个

a-entity

-标记一个唯一的ID，则此代码有效。我的组件的HTML代码不变，但可以使用此代码

---

在尝试解决方法后，我找到了一个有效的解决方案。这段代码的问题是它没有使用数据绑定，我认为它的性能不如数据绑定，但A-frame不支持它

在这里，您可以找到我在typescript代码中添加的代码：

ngAfterViewInit（）：void{
for（设i:number=this.currentData.hotspots.length；i--；）{
设spot:any=this.currentData.hotspots[i]，
el:any=document.getElementById（spot.id）；
el.setAttribute（“位置”，点位置）；
el.setAttribute（“旋转”，点旋转）；
el.setAttribute（“比例”，点比例）；
}
}

如果我给每个

a-entity

-标记一个唯一的ID，则此代码有效。我的组件的HTML代码不变，但可以使用此代码

---

给出了角度数据绑定不起作用的原因

使用角度单向数据绑定，实际上是在设置a-frame实体的属性。然而，在现实中，不存在这样的属性。这些实际上是这些元素的属性。因此，您可以通过domapi进行操作

但是，从安全角度来看，不建议使用domapi。但这也不是必须的

做某事

<a-entity *ngFor="let spot of currentData.hotspots; let i = index" [id]="spot.id" 
              [attr.position]="spot.location" [attr.rotation]="spot.rotation" [attr.scale]="spot.scale" 
              visible="true" mixin="null" color="pink" 
              text="zOffset:0;value:S;height:100;width:100;align:center"></a-entity>

<a-entity *ngFor="let spot of currentData.hotspots"
              [attr.position]="spot.location" [attr.rotation]="spot.rotation"
              [attr.scale]="spot.scale"
...