Angular 插值导致AOT编译错误

Question

我正在尝试编译我的应用程序，但由于 Angular 在 Angular 2 形式中进行插值，AOT 抛出了以下错误：

Property 'address' does not exist on type 'FirebaseObjectObservable'.

这是我的表单中的相关片段 HTML:

        <div class="col-md-6">
      <div class="form-group row clearfix" [ngClass]="{'has-error': (!address2.valid && address2.dirty), 'has-success': (address2.valid || address2.pristine)}">
        <label for="inputAddress2" class="col-sm-3 control-label">Address 2</label>
        <div class="col-sm-9">
          <input [formControl]="address2" value="{{building?.address?.address2}}" type="text" class="form-control" id="inputAddress2" placeholder="Address 2">
        </div>
      </div>
    </div>

这是我组件中的相关片段：

  public buildings: FirebaseObjectObservable<any>;
  ....
    this.buildings = this.af.database.object(this.fbs.bLocation + 
      this.buildingId + '/');
      this.buildings.subscribe((items) => {
        this.building = (items);
      });

现在我不确定我应该如何以不同的方式执行此操作，因为这在使用 Webpack 编译之前和 JIT 编译中工作得很好，但是一旦我使用 AOT 构建它用于生产，它就会抛出这个错误。我尝试在表单上使用插值的原因是因为我试图从数据库中提取用户的设置，并允许更新它们。

Answer 1

此错误来自类型 building 未在我的组件中声明。

通过导入我的建筑数据类型并在代码中声明它来解决问题，如下所示：

building: Building = {
  $key: null,
  details: {
    name: null,
  },
  address: {
    address1: null, address2: null, city: null, state: null, zipcode: null, country: null,
  },
  contact: {
    name: null, email: null, phone: null,
  },
};

感谢@JB Nizet 提醒我忘记申报了

Angular 插值导致AOT编译错误

Angular interpolation causing AOT compile error

typescript

angular2-forms

angular2-aot

angular