[英]How to set initial value for select element in Angular ngrx?
In Angular4/ngrx, how do we set a value as selected option in select box?在 Angular4/ngrx 中,我们如何在选择框中将值设置为选定选项?
The options are loaded via XHR.选项通过 XHR 加载。 Both list of options / to be selected value is available in store.两个选项列表/要选择的值都在商店中提供。
Here is the template:这是模板:
<select class="form-control" (change)="onSelectOperator($event.target.value)">
<option *ngFor="let operator of operator$ | async">{{operator.name}}</option>
</select>
Store:店铺:
export const initialState = {
operators: [], // to be loaded via XHR
selected: 'All'
};
Component:成分:
ngOnInit() {
this.loadOperators();
// assign observable
this.operators$ = this.store.select(getOperators);
}
After load, selected
value in store should be set as initial value for the select box.加载后,存储中的selected
值应设置为选择框的初始值。 This will be present in the XHR response list.这将出现在 XHR 响应列表中。
The angular 1 equivalent would be to use two way binding and set value to ng-model. angular 1 等效项是使用两种方式绑定并将值设置为 ng-model。 How does this translate into Angular4/ngrx?这如何转化为 Angular4/ngrx?
Use route guards to for loading values;使用路由守卫来加载值; so when your component inits all state will be ready to serve you component因此,当您的组件初始化所有状态时,将准备好为您提供组件
canActivate(): Observable<boolean> {
return this.checkStore().pipe(
switchMap(() => of(true)),
catchError((error) => of(false))
);
}
checkStore(): Observable<boolean> {
this.store.select(fromStore.selectAlbumsLoaded).subscribe((x) => console.log(x));
return this.store.select(fromStore.selectAlbumsLoaded).pipe(
tap(loaded => {
if (!loaded) {
this.store.dispatch(new fromStore.LoadAlbums());
}
}),
filter(loaded => loaded),
take(1)
);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.