CODEWITHSUNDEEP
angularaframe
Vu Thai Duy
Vu Thai Duy

Reputation: 169

Angular2: property binding not work with A-Frame entity

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.

Upvotes: 1

Views: 581

Answers (2)

Miranda Corcoran
Miranda Corcoran

Reputation: 21

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

Upvotes: 1

tire0011
tire0011

Reputation: 1058

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

Upvotes: 0

Related Questions