数据绑定不适用于 A 帧标记属性

Question

我正在使用 aframe and angular-cli 制作 WebVR 应用程序。我从资产中加载一些静态 JSON 数据，并将其绑定到 A 框架元素。这是我的 JSON 数据的示例。

{
    "id": 4,
    "image": "",
    "location": "Font",
    "nextScenes": [
        3,
        5
    ],
    "hotspots": [
        {
            "id": "obj1",
            "location": "2325 1305 -2400",
            "rotation": "-5 -50 -5",
            "scale": "150 150 150",
            "headerTitle": "",
            "body": ""
        },
        {
            "id": "obj2",
            "location": "3145 890 -2175",
            "rotation": "-5 -50 -5",
            "scale": "150 150 150",
            "headerTitle": "",
            "body": ""
        }
    ]
}

我将使用以下代码在我的 HTML 代码中加载 hotspots：

<a-scene inspector="url: https://aframe.io/releases/0.3.0/aframe-inspector.min.js">
    <a-assets>
        <img id="sky" [src]="currentImageSource" alt="" />
    </a-assets>

    <a-sky src="#sky"></a-sky>

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

注意 currentData 等于上面的 JSON 代码，currentImageSource 包含图像的位置。

上面代码的问题是属性 position、rotation 和 scale 不会绑定。在呈现的输出中，变量为空，但 ng-reflect-... 属性不为空。

此外，如果我使用 ctrl + alt + I 检查代码，对象获得了 a-entity 标签的默认值。

更新一： 属性 id 的数据绑定有效。

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

<app-vrtour _nghost-pub-1="">
  <a-scene class="fullscreen" inspector="" canvas="" keyboard-shortcuts="" screenshot="" vr-mode-ui="" auto-enter-vr="" _ngcontent-pub-1="">
    <a-assets _ngcontent-pub-1="">
      <ewalswebvr-static-assets _ngcontent-pub-1=""><img id="#details" crossorigin="anonymous" scr="/assets/images/details.jpg"></ewalswebvr-static-assets>
      <img id="sky" alt="" src="assets/360images/P5.tif" ng-reflect-src="assets/360images/P5.tif" _ngcontent-pub-1="">
    </a-assets>

    <!--template bindings={"ng-reflect-ng-for-of": "[object Object],[object Object]"}-->
    <!-- The two tags below are the lines that wouldn't bind -->
    <a-entity id="obj1" mixin="null" text="" ng-reflect-id="obj1" ng-reflect-position="2323.81 1305.90 -2400" ng-reflect-rotation="-4.58 -48.7 -5.16" ng-reflect-scale="150 150 150" ng-reflect-visible="true" position="" rotation="" scale="" visible=""
      _ngcontent-pub-1="" ng-reflect-color="#ff0000"></a-entity>
    <a-entity id="obj2" mixin="null" text="" ng-reflect-id="obj2" ng-reflect-position="3145.63 889.46 -2176.50" ng-reflect-rotation="-4.58 -48.7 -5.16" ng-reflect-scale="150 150 150" position="" rotation="" scale="" visible="" _ngcontent-pub-1=""
      ng-reflect-color="#00ff00"></a-entity>

    <a-sky src="#sky" material="" position="" rotation="" scale="" visible="" geometry="" _ngcontent-pub-1=""></a-sky>

    <canvas width="1920" height="930" class="a-canvas a-grab-cursor" style="width: 1920px; height: 930px;" data-aframe-canvas="true"></canvas>
    <div class="a-enter-vr" style="display: none;" aframe-injected=""><button class="a-enter-vr-button" aframe-injected=""></button></div>
    <div class="a-orientation-modal a-hidden" aframe-injected=""><button aframe-injected="">Exit VR</button></div>
    <a-entity aframe-injected="" position="" rotation="" scale="" visible="" camera="" wasd-controls="" look-controls="" data-aframe-inspector="default-camera"></a-entity>
    <a-entity aframe-injected="" position="" rotation="" scale="" visible="" light="" data-aframe-default-light=""></a-entity>
    <a-entity aframe-injected="" position="" rotation="" scale="" visible="" light="" data-aframe-default-light=""></a-entity>
    <a-entity position="" rotation="" scale="" visible="" camera=""></a-entity>
  </a-scene>

</app-vrtour>

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

提前致谢

Answer 1

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

https://aframe.io/docs/0.5.0/introduction/faq.html#why-is-the-html-dom-not-updating-in-a-frame

For performance reasons, A-Frame does not update the DOM with component data. Use the debug component to enable component-to-DOM serialization.

By default, for performance reasons, A-Frame does not update the DOM with component data. If we open the browser’s DOM inspector, we will see that many entities will have only the component name visible:
<a-entity geometry material position rotation></a-entity>
The component data is stored internally. Updating the DOM takes CPU time for converting component data, which is stored internally, to strings. However, when we want to see the DOM update for debugging purposes, we can attach the debug component to the scene. Components will check whether the debug component is enabled before trying to serialize to the DOM. Then we will be able to view component data in the DOM:
<a-entity geometry="primitive: box" material="color: red" position="1 2 3" 
          rotation="0 180 0"></a-entity>
Make sure that this component is not active in production.

Answer 2

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

在这里你可以找到我在打字稿代码中添加的代码：

ngAfterViewInit(): void {

    for (let i: number = this.currentData.hotspots.length; i--;) {

        let spot: any = this.currentData.hotspots[i],
            el: any = document.getElementById(spot.id);

        el.setAttribute("position", spot.location);
        el.setAttribute("rotation", spot.rotation);
        el.setAttribute("scale", spot.scale);
    }
}

如果我给每个 a-entity 标签一个唯一的 ID，这个代码就可以工作。我的组件的 HTML 代码未更改，但可以改用它。

<a-entity *ngFor="let spot of currentData.hotspots; let i = index" [id]="spot.id"
          text="zOffset:0;value:S;height:100;width:100;align:center"></a-entity>

Answer 3

给出了 angular 数据绑定不起作用的原因 here。

使用 Angular 一种数据绑定方式，您实际上是在设置框架实体的属性。然而，实际上，不存在这样的属性。这些实际上是那些元素的属性。因此，您可以通过 dom api.

进行操作

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

要进行属性数据绑定，您可以使用类似如下的语法。

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

Answer 4

您可以使用 [attr.*] 属性在模板中使用此功能（无需在控制器 class 中进行任何 a-entity 设置）绑定语法，例如

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

（不需要元素 ID。）

REF：

数据绑定不适用于 A 帧标记属性

Databinding does not work for A-frame tag attributes

data-binding

webvr

angular-cli

aframe