如何从 Angular 属性绑定加载框架资产答案

【问题标题】：How to load a-frame asset from Angular property binding如何从 Angular 属性绑定加载框架资产
【发布时间】：2019-06-03 13:38:09
【问题描述】：

我正在尝试从后端加载一个 OBJ 文件并使用 A-Frame 显示它。如果我像这样在 HTML 中硬编码 url，我可以让它正确加载模型：

  <a-asset-item id="model-obj" src="http://localhost:8080/dashboard/portal/downloadObj/12b557b5-25d8-459c-b4ea-2bddce34c3af?token=eyJhbGciOiJSUz"></a-asset-item>

但我确实需要在 Angular 的帮助下动态构建它，如下所示：

  <a-asset-item id="model-obj" [src]="srcUrl"></a-asset-item>

但每次我这样做时，a-frame 都不会真正正确地获取 src 属性——可能是因为它在运行时没有获取 src URL。我知道我在里面放了正确的字符串，我已经尝试过了，但无济于事：A-Frame not loading assets from Angular

关于我如何做到这一点的任何想法？

【问题讨论】：

遇到类似问题。也试过="{{my_id}}"，没有设置属性。
是的——同样的想法

标签： angular aframe

【解决方案1】：

围绕 Angular 的数据绑定延迟的工作解决方案：

<a-asset-item
  *ngFor="let item of items; trackBy: trackItem"
  id="placeholder"
  src="placeholder.glb"
  [attr.id]="item?.id"
  [attr.src]="item?.uri">
</a-asset-item>

问题是数据绑定不会立即发生，因此 A-Frame 会出错，因为当时没有提供 src。

【讨论】：

【解决方案2】：

资产管理系统在 Angular 中不能很好地工作，但还有一种官方不推荐的方式。在框架资产管理系统之外加载您的资产。文档：https://aframe.io/docs/0.9.0/primitives/a-gltf-model.html

在相关线程中查看此答案：https://stackoverflow.com/a/55477602/1345116

【讨论】：

【解决方案3】：

你可以等到它有一个使用 *ngIf 的 src 后才渲染它

但是你需要使用容器，因为 *ngFor 和 *ngIf 不能用于同一个元素。

<a-container
`*ngFor="let item of items; trackBy: trackItem"`>
<a-asset-item
  *ngIf=“item && item.uri”
  id="placeholder"
  src="placeholder.glb"
  [attr.id]="item?.id"
  [attr.src]="item?.uri">
</a-asset-item>
<a-container>

【讨论】：