Получить наблюдаемое значение внутри кода .ts - PullRequest
Новая
       15

Получить наблюдаемое значение внутри кода .ts

0 голосов
/ 10 июня 2018

Я использую Angularfire2 для загрузки и скачивания изображений.Но после удаления getDownloadURL() я застрял здесь. 

import { finalize } from 'rxjs/operators';

@Component({
  selector: 'app-root',
  template: `
    <input type="file" (change)="uploadFile($event)" />
    <div>{{ uploadPercent | async }}</div>
    <a [href]="downloadURL | async">{{ downloadURL | async }}</a>
 `
})
export class AppComponent {
  uploadPercent: Observable<number>;
  downloadURL: Observable<string>;
  constructor(private storage: AngularFireStorage) {}
  uploadFile(event) {
    const file = event.target.files[0];
    const filePath = 'name-your-file-path-here';
    const fileRef = this.storage.ref(filePath);
    const task = this.storage.upload(filePath, file);

    // observe percentage changes
    this.uploadPercent = task.percentageChanges();
    // get notified when the download URL is available
    task.snapshotChanges().pipe(
        finalize(() => this.downloadURL = fileRef.getDownloadURL() )
     )
    .subscribe()
  }
}

Я получаю downloadURL на HTML-странице, но как попасть внутрь функции?

1 Ответ

0 голосов
/ 10 июня 2018

Вы должны подписаться на this.downloadURL Observable, чтобы получить строку URL.«Асинхронный» канал в HTML в основном делает то же самое.Подписка и обновление значения, как только значение будет отправлено.

Но вы должны убедиться, что this.downloadRef не является нулевым.Так что в вашем примере кода это должно войти в функцию финализации.

 task.snapshotChanges().pipe(
    finalize(() => {
       this.downloadURL = fileRef.getDownloadURL();
       this.downloadURL.subscribe(url => console.log(url) );
    })
 )

Но я не уверен, является ли финализация правильной функцией в любом случае.Этот код работает только в том случае, если snapshotChanges Observable завершается или выдает ошибки после первой передачи.Но мне нужно больше информации об истории вопроса для более подробного ответа.

...