Angular 尝试获取特定值无效

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。此假设基于您的评论：

"This works if I print my JSON"

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

由于您在循环逻辑 (*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">

Angular 尝试获取特定值无效

Angular try to get specific value doesnt work

angularfire2

angular

google-cloud-firestore