时间戳

首页 > 解决方案 > 使用 rxjs 在 Angular 中获取 FireStorage URL，直到渲染

angular - 使用 rxjs 在 Angular 中获取 FireStorage URL，直到渲染

问题描述

我尝试在 Angular App 中显示图像，但它有问题。没有图片显示。

html文件

<div id="canvas-my-bouquet">
    <div id="container-my-bouquet">
        <cdk-virtual-scroll-viewport appendOnly itemSize="50" class="my-bouquet-scroll">
            <div *cdkVirtualFor="let boucket of arrayBouquetSrc"class="bouquet-item">
                <div id="drag-items">
                    <span>{{boucket.name}}</span>
                    <img [src]="_DomSanitizationService.bypassSecurityTrustUrl(boucket)" class="flower-image" [matTooltip]="" matTooltipPosition="right">
                </div>
            </div>
        </cdk-virtual-scroll-viewport>
    </div>
</div>

打字稿文件

export class MyBouquetComponent implements OnInit {

    email : any
    Data : any
    userInfo : any;
    arrayBouquetName : string[]
    arrayBouquetSrc : any[]

  constructor( private fireStore : AngularFirestore, private loginServise : IsLoginService, private storage: AngularFireStorage, public _DomSanitizationService: DomSanitizer) {
        this.arrayBouquetSrc = [];
    }   

  async ngOnInit() {
        this.email = await this.loginServise.userInfo();
        this.Data = await this.fireStore.collection("user").doc(this.email).get().toPromise().then((data) => {
            this.arrayBouquetName = data.get("src")
            return this.arrayBouquetName
        })

        from(this.arrayBouquetName).pipe(
            map(item => {
                console.log(item)         //this print 13, 14, flower1 on console
                return firebase.storage().ref(`${this.email}`).child(`${item}`).getDownloadURL()
            })
        ).subscribe((data : any) => {
            data.then(data => {
                this.arrayBouquetSrc.push(data)
                console.log(this.arrayBouquetSrc)       //this print url of firestorage image
            })
        })
        console.log(this.arrayBouquetSrc)               //this print [] on console
        console.log("well....")
    }
}

当我运行这段代码时，我从浏览器的控制台得到了这个结果。

在此处输入图像描述


渲染页面时，arrayBouquetSrc 为 [ ] 所以，在这种情况下可能无法显示图片
，在渲染之前如何获取 url？

标签： angularfirebaseasynchronousrxjs

解决方案

好的，我解决了这个问题。

首先，我参考这个链接

所以，我写了这段代码。

  async ngOnInit() {
        const items =[];
        this.email = await this.loginServise.userInfo();
        this.Data = await this.fireStore.collection("user").doc(this.email).get().toPromise().then((data) => {
            this.arrayBouquetName = data.get("src")
            return this.arrayBouquetName
        })

        const source$ = from(this.arrayBouquetName);
        this.items$ = source$.pipe(
            map(async item => {
                let getValue = await firebase.storage().ref(`${this.email}`).child(`${item}`).getDownloadURL().then(async(data)=>{
                    //await console.log(data)
                    return data
                })
                console.log(getValue)
                return {'name' : item, 'src' : getValue};
            }),
            map((data) => {
                console.log(data)
                items.push(data);
                console.log(items)
                return [...items]
            }),
        )
    }

但它有问题。本例返回类型为 ZoneAwarePromise:(

在此处输入图像描述


所以，我尝试在打字稿文件中修复这个值，但是我无法解决它。

之后，我找到了另一种在模板文件中进行控制的方法，

效果很好:)

<div id="canvas-my-bouquet">
    <div id="container-my-bouquet">
        <cdk-virtual-scroll-viewport appendOnly itemSize="50" class="my-bouquet-scroll">
            <div *cdkVirtualFor="let boucket of items$ | async"class="bouquet-item">
                <div id="drag-items">
                    <span>{{boucket.__zone_symbol__value.name}}</span>
                    <img id={{boucket.__zone_symbol__value.name}} [src]="_DomSanitizationService.bypassSecurityTrustUrl(boucket.__zone_symbol__value.src)" class="flower-image" [matTooltip]="" matTooltipPosition="right">
                </div>
            </div>
        </cdk-virtual-scroll-viewport>
    </div>
</div>

推荐阅读