无法使用字符串插值访问 Firestore 数据的 JSON 属性

Question

我无法在字符串插值期间访问我的 Firestore 文档的属性。不过，常规 JSON 输出工作正常。这是代码：

工作

<h3>{{ teacher | async | json }}</h3>

输出：

---

不工作

<h3>{{ teacher.name | async | json }}</h3>

和

<h3>{{ teacher.name | async }}</h3>

输出：

---

打字稿代码

interface Teacher {
  name: string;
}

teacherDoc: AngularFirestoreDocument<Teacher>;
teacher: Observable<Teacher>;

var placeToSearch = 'Teachers/'+this.selectedTeacher;

this.teacherDoc = this.afs.doc(placeToSearch);
this.teacher = this.teacherDoc.valueChanges();

Answer 1

你的界面应该有名称和字段

interface Teacher {
  name: string;
  field: string;
}

<h3>{{ teacher?.name | async  }}</h3>

Answer 2

您只是稍微偏离了异步管道。该对象需要先解包，然后调用它的属性。它应该看起来像：

{{ (teacher | async)?.name }}

或者更好的是，设置一个模板变量以避免反复使用异步管道：

<div *ngIf="teacher | async as t">
  {{ t.name }}
  {{ t.field }}
  {{ t.whatever }}
</div>