I am facing an issue while compiling my application. The AOT compiler is showing an error related to Angular interpolation in an Angular 2 form:
Property 'address' does not exist on type 'FirebaseObjectObservable'.
Here's a snippet from the HTML code of my form:
<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>
And here is the relevant part from the component code:
public buildings: FirebaseObjectObservable<any>;
....
this.buildings = this.af.database.object(this.fbs.bLocation +
this.buildingId + '/');
this.buildings.subscribe((items) => {
this.building = (items);
});
I am unsure about the correct approach to resolve this issue. The current setup works perfectly before compilation using Webpack and in JIT compilation, but when building it for production with AOT, the mentioned error occurs. I need to use interpolation in the form to fetch user settings from the database for updating purposes.