[英]Angular2 ngFor select doesn't update until model changes
我有一个ngFor的简单选择,选择框为空,直到我键入其他字段之一,然后它神奇地显示了数据,即使我知道它以前完成了数据调用也是如此。
我的观点
<div class="form-group col-md-3">
<label for="payerId">PayerId</label>
<select class="form-control">
<option *ngFor="#item of model.payers">{{item.HealthPlanName}}</option>
</select>
</div>
<div class="form-group col-md-3">
<label for="providerType">Provider Type</label>
<input type="text" class="form-control" [(ngModel)]="model.providerType"/>
</div>
我的组件
import {Component, Injectable, OnInit, View} from "angular2/core";
import {CORE_DIRECTIVES, FORM_DIRECTIVES, NgForm, NgFormControl, NgFor} from "angular2/common";
import {CoverageService} from "../../services/coverage/coverage.services";
import "rxjs/Rx";
@Component({
selector: "coverage",
providers: [CoverageService]
})
@View({
templateUrl: "/Scripts/appScripts/components/coverage/coverage.html",
directives: [CORE_DIRECTIVES, FORM_DIRECTIVES, NgForm, NgFormControl, NgFor, PayerSelector]
})
export class CoverageComponent implements OnInit {
model = new CoverageRequest();
constructor(private coverageService: CoverageService) {}
ngOnInit() {
this.getPayers();
}
getPayers() {
this.coverageService.getPayers()
.subscribe(resp => {
this.model.payers = resp;
});
}
}
真是挠头。
这是我正在使用的库:
"dependencies": {
"angular2": "2.0.0-beta.0",
"systemjs": "^0.19.20",
"es6-promise": "^3.0.2",
"es6-shim": "^0.33.3",
"reflect-metadata": "0.1.2",
"rxjs": "5.0.0-beta.0",
"zone.js": "0.5.10"
}
我的服务
import {Http, Response} from "angular2/http";
import {Injectable} from "angular2/core";
import {COVERAGE_BASE} from "../../config";
import "rxjs/Rx";
@Injectable()
export class CoverageService {
constructor(public http: Http) {
}
getPayers(): any {
return this.http.get(COVERAGE_BASE + "/Payers")
.map((response: Response) => response.json());
}
}
数据
[{
"Id": 3817,
"ProviderId": 2,
"ApiPayerId": "00028",
"HealthPlanName": "Georgia Medicaid",
"Type": null,
"PayerSynonyms": null
}, {
"Id": 3818,
"ProviderId": 2,
"ApiPayerId": "00143",
"HealthPlanName": "J. F. Molloy and Associates Inc.",
"Type": null,
"PayerSynonyms": null
}]
尝试在ngOnInit中而不是直接在类中初始化模型。 您将需要在视图中使用elvis运算符,因为最初模型是不确定的。 在此处阅读有关Elvis运算符的更多信息: https ://angular.io/docs/ts/latest/guide/template-syntax.html#!#sts = The%20Elvis%20operator%20(%20%3F.%20 ) %20于是%20null%20property%20paths
我不太确定,但我认为它应该起作用。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.