a-assets in Aframe failing with dynamic data loaded using Angular 2

问题

As i do not have fixed number of assets, which needs to be loaded from server, I am using Angular 2 templates to create assets dynamically. Sample code is as follows -

<a-assets>      
        <div *ngFor="let scene of floorData.scenes;let i=index">
            <img id="scene-{{i}}" src="{{assetData}}/floor-{{floorNumber}}/{{scene.id}}/vrimage.jpg" crossorigin="anonymous" />                
        </div>        
</a-assets>

But by the time floorData comes from server *ngFor get executed and floorData.scenes throws undefined error.

I need this code to be run only when floorData has come from server. Can anybody suggest solution?

回答1:

To use aframe with angular you need to understand how aframe works under the hood.

Aframe is based on web components and has a custom setAttribute function which needs to be invoked, otherwise the underlying three.js objects won't get updated.

The way to get angular to call the setAttribute instead of setting the property on the element is to call prefix calls to aframe element attributes with [attr.*]=

for example you want to dynamically load some gltf models.

<a-gltf-model
  *ngFor="let model of models$ | async"
  [attr.id]="model.id"
  [attr.src]="model.modelUrl"
></a-gltf-model>

回答2:

You might want try something like this:

  <ng-container *ngFor="let scene of floorData.scenes;let i=index">
    <img id="scene-{{i}}" src="{{assetData}}/floor-{{floorNumber}}/{{scene.id}}/vrimage.jpg" crossorigin="anonymous" />
  </ng-container>

Injecting a <div> as a child of <a-asset> will probably prevent your assets from loading. What you want to use is <ng-container> so that no tags will be generated

来源：https://stackoverflow.com/questions/47740915/a-assets-in-aframe-failing-with-dynamic-data-loaded-using-angular-2

标签

angular

aframe