AngularFire2 在 iOS 浏览器中导致无限循环答案

【问题标题】：AngularFire2 causing infinite loops in iOS browsersAngularFire2 在 iOS 浏览器中导致无限循环
【发布时间】：2017-04-05 18:02:41
【问题描述】：

我遇到了一些独特的问题，我一直在疯狂地试图解决它。

我有一个 Angular2 应用程序，它使用带有 AngularFire2 的 WebPack 来操作元数据。我正在开发的当前功能是将文件上传到 Firebase 存储，获取该位置的 URL，然后将该 URL 附加到文件上传到的对象的元数据中，以便用户在需要时查看。这在所有桌面和 android 浏览器中都可以正常工作，但在几乎所有 iOS 浏览器（在 Safari、Chrome、Firefox 上测试，结果都相同）上失败，控制台或系统错误为 0，只是拒绝在网站上进行任何更多操作，不能重新加载，除了强制关闭选项卡或浏览器应用程序并重新加载之外无法执行任何操作。

这是我的代码的细分：

这是循环通过FirebaseListObservable并在视图中显示数据的HTML：

<div *ngFor="let item of items | async">
    <input type="file" name="file" id="{{ item.$key }}" class="inputfile" (change)="uploadPicture($event, item)"/>
    <label [attr.for]="item.$key">{{item.name}}</label>
    <img *ngIf="item.fileUrl" src="../../assets/img/star.png" class="cell-img" (click)=showImg(item.fileUrl)>
</div>

上传文件：

firebase.storage().ref().child('images/' + filename).put(file, metadata).then(snapshot => this.obtainUploadUrl(snapshot, key, filename));

在获取文件位置 url 并传递 firebase 对象键（位于 FirebaseListObservable 中）后，我像这样更新列表：

console.log("Updating", key, "With", data);
this.af.database.list('/games/' + this.currentGame.$key + '/items').update(key, data);

据我所知，在获取文件上传快照后，我在任何地方操作 items 列表或本地 this.items 时都会发生故障。当我尝试更新、推送或删除该 FirebaseListObservable 中的任何对象时，移动网站停止工作并陷入无限循环。

肯定有一些我没有考虑到的特殊情况，或者 iOS 不喜欢我使用的 Firebase 对象的一些误用。

感谢任何帮助，我似乎找不到任何解决方案，但不使用 Firebase。

更新

经过一天的修改后，我发现 iOS 浏览器中的 firebase 不喜欢在输入点击功能中更新视图项。

<input type="file" name="file" id="{{ item.$key }}" class="inputfile" (change)="uploadPicture($event, item, items)"/>

在该 uploadPicture 函数中，如果我运行两行代码：

firebase.storage().ref().child('images/' + filename).put(file, metadata).then(snapshot => console.log("File uploaded!", snapshot));
this.items.update(key, {fileName: filename});

我在 iOS 中遇到同样的错误。但是，如果我尝试更改任何其他 firebase 对象，它不会冻结在我身上。仍然不确定为什么现在仅适用于 iOS 失败，而且我仍然完全不知道如何解决这个问题。

【问题讨论】：

标签： ios firebase firebase-realtime-database firebase-storage angularfire2

【解决方案1】：

最后的问题是 iOS 拒绝让我上传文件并通过相同的功能更改 firebase 对象。通过从输入 HTML 标记开始的函数对迭代对象执行的任何 firebase 操作都会使网站停止运行。最终，我只需要执行一个两步过程，一个是暂存文件并将其加载到内存中，第二个阶段是上传文件并更新 firebase 对象。

欢乐时光。

【讨论】：