Question

我有一个独特的问题，我一直在努力解决它。

我有一个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的失败，我仍然不知道如何解决这个问题。

Answer 1

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

欢乐时光。

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

1 个答案: