Firestore ngIf插值

Question

我将firebase集合命名为vehicles： 每个文档都有相同的字段。我想只打印那些可用的文档。 available字段为boolean类型。如果我执行某些操作，则available将更改为false。

所以我将vehicles集合导入我的组件：

  export class VehiclesComponent implements OnInit {

  vehiclesCollection: AngularFirestoreCollection<Vehicle>
  vehicles: Observable<Vehicle[]>;

  constructor(private afs: AngularFirestore) {
    this.vehiclesCollection = afs.collection('vehicles')

    this.vehicles = this.vehiclesCollection.valueChanges()
    console.log(this.vehicles.subscribe(function(val) { console.log(val.map(function(x) { x.avaiable }))}))

  }

  ngOnInit() {
  }
}

现在我想打印只有available字段设置为true的文档：

<ng-container *ngFor="let vehicle of vehicles | async">
  <div *ngIf="{{vehicles.avaiable}}">
    {{ vehicle.brandOfCar }}
  </div>
</ng-container>

我收到以下错误：

`compiler.js:485 Uncaught Error: Template parse errors:
TypeError: Cannot read property 'toUpperCase' of undefined ("

<ng-container *ngFor="let vehicle of vehicles | async">
  <div [ERROR ->]*ngIf="{{vehicles.avaiable}}">
    {{ vehicle.brandOfCar }}
  </div>
  ...
   `

我做错了什么？我怎样才能克服这个问题？

Answer 1

您不能像*ngIf="{{vehicles.avaiable}}"

那样进行插值

尝试没有大括号。

*ngIf="vehicles.avaiable"

如果您只想显示具有true值的车辆，请在此类查询中执行此操作

this.vehiclesCollection = afs.collection('vehicles', ref => ref.where('avaiable', '==', true))

然后它只会下载您要显示的项目。并且不要忘记添加索引。