firebase 获取下载 url 无限循环请求

Posted 2023-03-22

【中文标题】firebase 获取下载 url 无限循环请求

【英文标题】：firebase fetch download url infinite loop request

【发布时间】：2019-11-07 05:52:32

【问题描述】：

当尝试从 Firebase 存储中获取下载 URL 时，我收到相同的问题，发出无限请求 这是我的代码：

我的组件 HTML

 <div *ngIf="(geturlimagefromserver() | async)  as imgc ;else loadiing ">
       <img 
            class="card-img-top"
            
            [src]="imgc | ''" 
            data-holder-rendered="true"
            style="    margin: 4px;
            width: 246px;
            height: 175px; display: block;"
          /> 
          </div>
          <ng-template #loadiing>

            <div class="text-menuted">Loading image...</div>
          </ng-template>

我的组件组件

geturlimagefromserver():Observable <any>
  console.log('i get hier infinite loop ');
 return this.RobotService.getMetadata(path);

我在控制台中看到 infinity 打印单词“我得到了无限循环”

MyService 服务

  getMetadata() :Observable <any>
    const ref = this.storage.ref('myfile/img1');
   return ref.getDownloadURL();

大问题

是我调用函数的时候：

geturlimagefromserver() 在 Mycomponent.html 中 我的浏览器在网络中收到无限请求

但是当我调用我的函数时： Mycomponent.component.ts 中的 getMetadata() 像这样

 this.MyService.getMetadata().subscribe(data=>
      ) 
      console.log("its work so fun");

  console.log(data);

      

它的工作很有趣，他从火存储中找到了准确的 url 下载器

【参考方案1】：

你不是在一个 infinite 循环中，发生的事情是每次 angular 检查 DOM 时都会调用函数 get Url，所以它看起来像一个无限循环。

出于上述原因，您应该避免直接在 html 上使用函数，在组件上执行此操作，或者您可以使用管道。

简而言之，不是 firebaseStorage 的问题，而是 changeDetection 在 Angular 中的工作方式。

【讨论】：

我已经把变量 observable 而不是 geturlimagefromserver() 它的工作很有趣，尽管我的问题是将函数返回 observable 放在 component.html 中