数据绑定不适用于angular中的模型属性

Question

I am trying to put an Angular application together as I am learning. I am having trouble using data binding with a model property.

I have a model: announcer.model.ts

export class Announcer{
    constructor(public name: string){}
  }

I import the model in the register.component.ts:

import { Announcer} from '../models/announcer.model'

  ....some code omited

announcer: Announcer
loading: Boolean

 constructor(private http: Http) { }

ngOnInit() {
       this.getRegister(); //I use this code to set the announcer variable
}


getRegister() : void
{
     this.loading= true;
     this.http.request('http://www.example.com/apiannouncer/show/0').subscribe((res: Response) => {
     var result = res.json();



     this.announcer= new Announcer(result.name);
    this.loading= false;
 } )

}

In the template of the register.component.ts I can't use this:

 <div> {{ announcer.name }} </div>

I get this message:

Uncaught (in promise): Error: Error class - inline template:2:5 caused by: self.context.announcer is undefined

Answer 1

You need to use controllerAs syntax in your views, take a look at here and here .

change your template to this:

<div ng-controller="MyController as vm"
     <div> {{ announcer.name }} </div>
 </div>

what it does is simply put an instance of your class in $scope and make that class available in $scope via vm .