Question

我正在尝试将Angular应用程序放在一起，因为我正在学习。我在使用模型属性的数据绑定时遇到问题。

我有一个模型：announcer.model.ts

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

我在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;
 } )

}

在register.component.ts的模板中我不能使用它：

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

我收到此消息：

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

Answer 1

您需要在视图中使用controllerAs语法，请查看here和here。

将模板更改为：

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

它的作用只是在$scope中放置一个班级的实例，并通过$scope在vm中提供该班级。

数据绑定不适用于角度的模型属性

1 个答案: