Question

在我写的Angular 2应用程序中，我有一个select元素，它通过[(ngModel)]绑定到控制器中的一个字段：

<select [(ngModel)]="dateInfo.year" class="form-control">
  <option *ngFor="let year of getYearList()" [value]="year">{{year}}</option> 
</select>

dateInfo是控制器中的一个属性，它引用名为DateInfo的服务中包含的DateService对象：

@Injectable()
export class DateService {
  public dateInfo: DateInfo = {
    year: 2016
  }
}

DateInfo对象本身是一个简单的Typescript接口，只存储年份：

export interface DateInfo {
  year: number
}

我使用此界面的原因是根据the first answer to this question将对year的更改传播到使用DateService的所有组件。

出于某种原因，当模型从select元素更改时，整个应用程序冻结（在Chrome和Edge中测试）。我已经做了一个问题来解释问题here。

提前致谢！

Answer 1

问题是由getYearList()为每次调用返回一个新数组实例引起的。每次Angulars更改检测运行时，它都会检测到更改，因为它每次都会获得一个新数组。我想知道为什么你没有得到一个表达已经改变，因为它是上次检查过的想法＆＃34;

这就是为什么从模板中调用方法通常是不好的做法。而是将方法调用的结果分配给属性并改为绑定到此属性。