[英]Angular2 select failed to set the default Value
My select department template code looks like, 我选择的部门模板代码如下所示:
<div class="form-group">
<label class="control-label">Location</label>
<select class="selectpicker" *ngIf="locations" data-style="btn btn-primary btn-round" title="Select A Location"
[(ngModel)]="selectedLocation"
[ngModelOptions]="{standalone: true}">
<option *ngFor="let loc of locations"
[ngValue]="loc">
{{loc.name}}
</option>
</select>
<span *ngIf="!selectedLocation" class="help-block text-danger">
You must select one Location.
</span>
</div>
This code is reponsible for getting the locations from server. 此代码负责从服务器获取位置。 I can manage to list these locations once the
select
dropdown is clicked. 单击
select
下拉列表后,我可以设法列出这些位置。
select.ts
private selectedLocation: any = null;
ngOnInit() {
this.buildForm();
this.getLocations();
}
setDefaultTypeAndLocation() {
for (let location of this.locations) {
if (location.name === this.vehicle.location) {
this.selectedLocation = location;
break;
}
}
}
ngOnChanges() {
console.log(this.vehicle);
if (this.vehicle.type.key !== '' && this.vehicle.location) {
this.setDefaultTypeAndLocation();
}
this.buildForm();
}
getLocations() {
this.locations = this.locationsService.locations;
if (!this.locations) {
this.locationsService.list()
.subscribe(
data => {
this.locations = data;
},
error => {
console.log('err in vehicle form getLocations method');
}
);
} else {
}
}
On clicking the edit button on the parent component, corresponding vehicle
object is passed to the child component which thereby initiates the ngOnChanges
method. 单击父组件上的编辑按钮时,
ngOnChanges
相应的vehicle
对象传递给子组件,从而启动ngOnChanges
方法。
See, this this.setDefaultTypeAndLocation();
参见
this.setDefaultTypeAndLocation();
invokes method setDefaultTypeAndLocation()
which was used to set the default Location ( this.selectedLocation = location;
). 调用用于设置默认位置(
this.selectedLocation = location;
)的方法setDefaultTypeAndLocation()
)。
From this point, I properly updated the this.selectedLocation
value. 从这一点来说,我正确地更新了
this.selectedLocation
值。 But on the View, the location I set previously wasn't shown as default Location. 但是在视图上,我之前设置的位置未显示为默认位置。
Maybe your are not showing all code, but I don't see you ever calling the getLocations()
method. 也许您没有显示所有代码,但是我看不到您曾经调用过
getLocations()
方法。 This means that this.locations
will always be an empty list, so no location can be set. 这意味着
this.locations
将始终是一个空列表,因此无法设置任何位置。
edit: 编辑:
Instead of initializing your locations in ngOnInit
, change your getLocations
method to update locations when needed. 无需在
ngOnInit
中初始化位置, ngOnInit
更改getLocations
方法以在需要时更新位置。 Initializing in in ngOnInit
won't work, since ngOnChanges
is called BEFORE ngOnInit
( https://angular.io/docs/ts/latest/guide/lifecycle-hooks.html ). 由于
ngOnChanges
在ngOnInit
( https://angular.io/docs/ts/latest/guide/lifecycle-hooks.html )之前被称为,因此无法在ngOnInit
初始化。
See this code example: 请参见以下代码示例:
ngOnInit() {
//do not initialize locations here
}
setDefaultTypeAndLocation() {
//change this.location to this.getLocations()
for (let location of this.getLocations()) {
if (location.name === this.vehicle.location) {
this.selectedLocation = location;
break;
}
}
}
getLocations() {
// Add this check
if (this.locations && this.locations.length > 0) return this.locations;
this.locations = this.locationsService.locations;
if (!this.locations) {
this.locationsService.list()
.subscribe(
data => {
this.locations = data;
},
error => {
console.log('err in vehicle form getLocations method');
}
);
} else {
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.