Question

由于我没有固定数量的资产，需要从服务器加载，我使用Angular 2模板动态创建资产。示例代码如下 -

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-2.0.xsd
                http://camel.apache.org/schema/spring http://camel.apache.org/schema/spring/camel-spring.xsd">
    <camelContext id="camelContext" xmlns="http://camel.apache.org/schema/spring">
        <routeBuilder ref="DescriptiveInfoRoute"/>
        <routeBuilder ref="DescriptiveInfoRouteV2"/>
    </camelContext>
</beans>

但是当时floorData来自服务器* ngFor get执行并且floorData.scenes抛出未定义的错误。

我需要只在floorData来自服务器时运行此代码。任何人都可以建议解决方案吗？

Answer 1

要使用带角度的框架，您需要了解框架下的框架是如何工作的。

Aframe基于Web组件，并且具有需要调用的自定义setAttribute函数，否则底层的three.js对象不会被更新。

获取角度以调用setAttribute而不是在元素上设置属性的方法是使用[attr.*]=

调用对aframe元素属性的前缀调用

例如，您想动态加载一些gltf模型。

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

Answer 2

您可能想要尝试这样的事情：

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

将<div>作为<a-asset>的子项注入可能会阻止您的资产加载。您要使用的是<ng-container>，这样就不会生成标签

Aframe中的a资产因使用Angular 2加载动态数据而失败

2 个答案: