質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Firebase

Firebaseは、Googleが提供するBasSサービスの一つ。リアルタイム通知可能、並びにアクセス制御ができるオブジェクトデータベース機能を備えます。さらに認証機能、アプリケーションのログ解析機能などの利用も可能です。

Onsen UI

HTML5で記述されたモバイルアプリの高速化、およびネイティブアプリライクなUIが作れるフレームワーク。 様々なJavaScriptフレームワークと併せて使用することができます。スマートフォン向けアプリ、Webサイトに必要なアニメーション、UI/UXを実装することが可能になります。

Q&A

解決済

2回答

2349閲覧

【Angular2 Firebase】ngForでストレージにある画像を取得したい

KoheiOkazaki

総合スコア43

Firebase

Firebaseは、Googleが提供するBasSサービスの一つ。リアルタイム通知可能、並びにアクセス制御ができるオブジェクトデータベース機能を備えます。さらに認証機能、アプリケーションのログ解析機能などの利用も可能です。

Onsen UI

HTML5で記述されたモバイルアプリの高速化、およびネイティブアプリライクなUIが作れるフレームワーク。 様々なJavaScriptフレームワークと併せて使用することができます。スマートフォン向けアプリ、Webサイトに必要なアニメーション、UI/UXを実装することが可能になります。

0グッド

0クリップ

投稿2016/12/09 05:42

現在Angular2とFirebaseを使ったアプリ開発を行っています。

ユーザー一覧の画面があるのですが、そこをngForを使って取得しています。

<ons-list-item class="list__item list__item--chevron" tappable *ngFor="let request of requests | async" (click)="pushToDetail(request)"> <ons-row> <ons-col width="20%"><img [src]="userProfileImg"></ons-col> <ons-col style="padding-left:20px;"> <p class="stars">★★★★★</p> <p class="name"><i class="fa fa-venus fa-fw" aria-hidden="true"></i>{{request.nickName}}</p> <p class="time"><i class="fa fa-clock-o fa-fw" aria-hidden="true"></i>{{request.startingTime | date:'MM'}}/{{request.startingTime | date:'dd'}}/{{request.startingTime | date:'hh:mm'}}</p> <p class="time label" style="background-color:#57c1ff;">{{request.serviceTime}}分</p> <p class="km">1.3km</p> </ons-col> </ons-row> </ons-list-item>

imageに関してはstorageにアクセスして取得しています。

getProfileImageUrl(userId: string) { const userStorageRef = firebase.storage().ref().child('images/users/' + userId + "_users.jpg"); userStorageRef.getDownloadURL().then(url => { this.userProfileImg = url }); }

ただ、これだと最後のユーザーの画像を取得してforで回すので正しくありません。どうやってfor文を使ってstorageにアクセスするのでしょうか?

上記のメソッドを使ってforで回すのはできなかったです。(Monacaが落ちます)

<ons-col width="20%"><img [src]="getProfileImageUrl(userId)"></ons-col>

どうぞよろしくお願いいたします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

request.userProfileImg以外の要素をどのように取得しているのかが分からないのですが、request.userProfileImgは非同期通信で取得しているのですね。エラーメッセージが無いため推測となりますが、Monacaが落ちる理由は恐らく*ngForの中で非同期通信を何度も発生させている関連ではないかと。
アプローチとしては、*ngForの要素内では単にrequest.userProfileImgと記述しておいて、requestに対しuserProfileImgを設定する際に非同期通信を発生させるのが良いかと思います。

HTML

1<ons-col width="20%"><img [src]="getProfileImageUrl(userId)"></ons-col>

↓修正後

HTML

1<ons-col width="20%"><img [src]={{request.userProfileImg}}></ons-col>

上記のようにHTML上には記載しておいて、JavaScript側で任意のタイミングでrequest.userProfileImgを設定するようにしておけばよいのではないでしょうか。

投稿2016/12/26 08:30

akabee

総合スコア1947

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

KoheiOkazaki

2016/12/26 16:10

ご回答どうもありがとうございます!
guest

0

自己解決

かなり微妙な方法ですが自己解決できました。

akabeeさまのおっしゃるとおり、ストレージからgetDownLoadさせると処理が相当重たいみたいでMonacaが落ちてしまうのでfirebaseストレージのURLをベタ書きする方法でとってくるようにしました(汗)

URL+該当パスの形でとってこれればfor文でも回せるようです。

投稿2016/12/26 16:10

KoheiOkazaki

総合スコア43

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問