Угловая попытка получить конкретное значение не работает

Question

Я пытаюсь получить данные из моей коллекции Firestore. Это работает, если я печатаю свой JSON. Если я хочу сейчас показать одно значение, оно не работает. Чтобы получить мои данные, я создал следующее:

    interface Note{
      imageUrl: string;
    }

    ngOnInit(): void {
      window.scrollTo(0, 0);
      this.notesCollection = this.afs.collection('PromotedBlogs')
      this.notes = this.notesCollection.valueChanges()
    }

и я хочу показать imageUrl в img. Для этого я попробовал следующее, но это не работает, он просто показывает серый фон:

<div class="blogrow">
    <div class="blogcolumn" style="background-color:#aaa;" *ngFor="let note of notes | async"  >
        <img src="{{ (note | async).imageUrl}}" width="100%" height="300px">
    </div>
  </div> 

Answer 1

Здесь может быть несколько проблем.Трудно сказать с предоставленным вами ограниченным кодом.

Я работаю в предположении, что если вы сделаете что-то <div> {{notes | json}} </div> в своем шаблоне, оно будет успешно отображать ваш JSON.Это предположение основано на вашем комментарии:

"Это работает, если я распечатываю мой JSON"

Потенциальная проблема, которая выпирает, - это дублирующее использование асинхронный канал и использование вами скобок в атрибуте src тега изображения.

Поскольку вы разворачиваете Observable в своей логике зацикливания (*ngFor="let note of notes | async"), вам не нужно пытатьсяснова развернуть его при доступе к отдельным свойствам объектов note.Кроме того, в Angular вам не нужно использовать нотацию «волнистые скобки» для атрибута src тега изображения.

Вы можете попробовать обновить тег изображения до <img [src]="note.imageUrl" width="100%" height="300px"> и посмотреть, решит ли это вашу проблему.

Если нет, вы можете попытаться жестко закодировать путь, чтобы убедиться, что ваш путь действительно правильный для начала, что-то вроде: <img src="path/to/image.png" width="100%" height="300px">