Question

我使用Angular2和A-Frame来设计一个显示虚拟场景的Web应用程序。但似乎Angular的数据绑定功能不适用于a-frame实体

我将image url绑定到entity的[src]属性，如下所示：

====＆GT;＆GT;＆GT; sim.component.html

<a-scene>
    <a-entity camera look-controls position="10 0 8" rotation="0 20 0">
    </a-entity>

    <a-plane *ngFor="let item of layers; let i = index" width="10" height="6"
        src={{imageURL}} position="0 0 {{-3*i + 3}}">
    </a-plane>
</a-scene>

====＆GT;＆GT;＆GT; sim.component.ts

    @Component({
        templateUrl: './sim.component.html',
        selector: 'sim-tag',
        providers: [SimService]
    })
    export class SimComponent implements OnInit {

        imageURL: string;
        layers: Object[];

        constructor(private service: SimService, private config: Configuration){}

        ngOnInit() {
            this.layers = [1, 2, 3, 4, 5, 6];
            this.imageURL = "http://localhost/images/test.jpg";     
        }
    }

运行应用程序时，我认为它应该生成 a-plane 实体，如

<a-plane height="6" width="10"
    ng-reflect-src="http://localhost/images/test.jpg" src="http://localhost/images/test.jpg"
    ng-reflect-position="0 0 0" position="0 0 0" >
</a-plane>

但实际上是

<a-plane height="6" width="10" 
    ng-reflect-src="http://localhost/images/test.jpg" 
    ng-reflect-position="0 0 0"  position="">
</a-plane>

没有＆＃34; src＆＃34;和＆＃34;位置＆＃34;属性，因此，平面图像不显示。

我在这里做了一个演示：https://plnkr.co/edit/t6YhZy5gCzgycaYVeGrt?p=preview

请帮忙。感谢。

Answer 1

我可以帮助一点点，但我认为答案并不完整; - ）

a-plane使用src作为定义图像源的位置。见https://aframe.io/docs/0.5.0/primitives/a-plane.html#sidebar

这意味着你的模板应该像：

    <div>Hello AFrame and Angular2</div>
    <div>plane images do not display</div>
    <a-scene>
     <a-assets>
    <img id="ground" src="https://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png">
  </a-assets>
    <a-entity camera look-controls position="10 0 8" rotation="0 20 0">
    </a-entity>


      <a-plane *ngFor="let item of layers; let i = index" width="10" height="6"
        src="#ground" position="0 0 {{-3*i + 3}}">
    </a-plane>


</a-scene>

但我希望你想要a-plane foreach中的图像源，但是a-asset必须是a-scene的孩子

插件

https://plnkr.co/edit/YrXKnaLO5cEqy12pAkW1?p=preview

Answer 2

您只需要将要设置的属性括在方括号中，并使用attr作为前缀。 EX：[attr.position]="positionString"

Angular2：属性绑定不适用于A-Frame实体

2 个答案: