Angular2: property binding not work with A-Frame entity

Question

I'm using Angular2 and A-Frame to design a web application which displays virtual scene. But it seems data binding feature of Angular does not work with a-frame entity

I bind image url to [src] attribute of entity as the following:

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

====>>> 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";     
        }
    }

When run application, I think it should generate an a-plane entity like

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

but actually it is

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

there is no "src" and "position" attribute, hence, plane image display nothing.

I made a demo here: https://plnkr.co/edit/t6YhZy5gCzgycaYVeGrt?p=preview

Please help. Thanks.

can you get the code snippet run in the snippet editor? currently brings error — tire0011
– tire0011, Commented Mar 21, 2017 at 8:57
I have made a demo at plnkr.co/edit/t6YhZy5gCzgycaYVeGrt?p=preview — Vu Thai Duy
– Vu Thai Duy, Commented Mar 21, 2017 at 10:13
@hauca Did you find the solution of this? I've met the same problem. — user1349923
– user1349923, Commented Apr 25, 2017 at 2:00
No, I have not found any solution. Instead of using Angular *ngFor directive, I use javascript to append tags and attribute — Vu Thai Duy
– Vu Thai Duy, Commented Apr 25, 2017 at 18:06

Jason Roman · Accepted Answer · 2018-05-09 18:59:01Z

1

You just need to enclose the attribute you are trying to set in square brackets and prefix with attr. EX: [attr.position]="positionString"

edited May 9, 2018 at 18:59

Jason Roman

8,30610 gold badges37 silver badges44 bronze badges

answered May 9, 2018 at 18:37

Miranda Corcoran

213 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

tire0011 · Accepted Answer · 2017-03-21 11:52:47Z

0

I can help a litle bit but the answer is not complete i think ;-)

the a-plane uses as src an where you define the image source.. see https://aframe.io/docs/0.5.0/primitives/a-plane.html#sidebar

that means your template should be a litle bit like:

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

But I expect you want the image source inside of the a-plane foreach, but the a-asset must a child of the a-scene

the plunk

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

answered Mar 21, 2017 at 11:52

tire0011

1,0481 gold badge11 silver badges25 bronze badges

1 Comment

Vu Thai Duy Over a year ago

I have tried this way before but it not complete solution. Firstly, it just solve problem of binding image source to "src" property while problem still occur with other attribute such as "position", "rotation", etc. Secondly, since my real application need to set different Image URLs for different <a-plane>, therefore creating many assets respective to images is not what I expect. Thank your for your suggestion.

Collectives™ on Stack Overflow

Angular2: property binding not work with A-Frame entity

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related