Question

我正在尝试从Firestore集合中获取数据。如果我打印JSON，此方法有效。如果我现在想显示一个值，那是行不通的。为了获取我的数据，我创建了以下内容：

    interface Note{
      imageUrl: string;
    }

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

，我想在img中显示imageUrl。为此，我尝试了以下操作，但不起作用，它仅显示灰色背景：

<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，这将起作用”

一个潜在的问题是重复使用async pipe和在图像标签的src属性中使用括号。

由于在循环逻辑（*ngFor="let note of notes | async"中）取消了Observable的访问，因此在访问note对象的各个属性时，无需再尝试对其进行重新打包。此外，在Angular中，您无需为图像标签的src属性使用“弯括号表示法。”

您可以尝试将图片标签更新为<img [src]="note.imageUrl" width="100%" height="300px">，看看是否可以解决您的问题。

如果不是这样，您可以尝试对路径进行硬编码以验证您的路径实际上是正确的开头，例如：<img src="path/to/image.png" width="100%" height="300px">

角尝试获取特定值不起作用

1 个答案: