角度:为 <select> 设置选定的值 [英] Angular: set selected value for <select>
问题描述
我有异步加载的 数据集.我使用热 observable，因为数据可以随时间变化.问题是我无法设置选定的值，而且 Angular 本身也不指向第一个元素(在用户设置之前没有设置值).我正在尝试订阅我自己的 observable 并且......它不起作用，我想知道为什么?我该如何解决这个问题?
PLNKR:https://plnkr.co/edit/uDmTSHq4naYGUjjhEe5Q
@Component({选择器:'我的应用'，模板:`<div><h2>你好{{name}}</h2><select [(ngModel)]="selectedValue"><option *ngFor="let value of (values$ | async)"[value]="value">{{ value }}</选项></选择>`，})导出类 App 实现 OnInit、OnDestroy {公共名称:字符串；公共选择值:字符串 = '';公共值$:Observable 您订阅了您的 observable 两次.订阅后，异步管道在内部执行. 当 并覆盖 我会使用 要了解为什么 正如我提到的，早期的异步管道在内部订阅了 observable https:///github.com/angular/angular/blob/4.3.x/packages/common/src/pipes/async_pipe.ts#L23 I have data set for my PLNKR: https://plnkr.co/edit/uDmTSHq4naYGUjjhEe5Q
You subscribe to your observable twice. Async pipe does it internally after your subscription. When and overrides I would use To see why As i mentioned early async pipe subscribes to observable internally https://github.com/angular/angular/blob/4.3.x/packages/common/src/pipes/async_pipe.ts#L23 这篇关于角度:为 <select> 设置选定的值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！subscribe方法被执行时，它会执行subscribe函数观察者 =>this.observer = 观察者this.observer 属性，因此它仅对异步管道(最后一个订阅者)有效share 运算符来解决它new Observable(observer => this.observer = observer).share();this.observer 被覆盖，只需运行此代码让我的观察者；const observable$ = new Rx.Observable(function subscribe(observer) {console.log('订阅功能已被调用');myObserver = 观察者；});observable$.subscribe(function next1() { console.log('next1'); });observable$.subscribe(function next2() { console.log('next2'); });observable$.subscribe(function next3() { console.log('next3'); });myObserver.next();<select> loaded asynchronously. I use hot observable, as the data can change in time. The problem is I am unable to set selected value and also Angular does not point to first element by itself (there is no value set until user does it). I'm trying to subscribe to my own observable and... it doesn't work, I wonder why? How can I solve this problem?@Component({
selector: 'my-app',
template: `
<div>
<h2>Hello {{name}}</h2>
</div>
<select [(ngModel)]="selectedValue">
<option *ngFor="let value of (values$ | async)"
[value]="value">{{ value }}
</option>
</select>
`,
})
export class App implements OnInit, OnDestroy {
public name: string;
public selectedValue: string = '';
public values$: Observable<Array<string>> = new Observable(observer => this.observer = observer);
protected observer: Subscriber<Array<string>>;
protected subscription: Subscription;
constructor() {
this.name = `Angular! v${VERSION.full}`
}
ngOnInit() {
this.subscription = this.values$.subscribe((values) => {
console.log('never fired...');
this.selectedValue = values[0];
});
setTimeout(() => {
this.observer.next(['some', 'test', 'data']);
});
}
ngOnDestroy() {
if (this.subscription) {
this.subscription.unsubscribe();
}
}
}
subscribe method is being executed it executes subscribe function observer => this.observer = observer
this.observer property so it will have effect only for async pipe(last subscriber)share operator to solve itnew Observable(observer => this.observer = observer).share();
this.observer is overrided just run this codelet myObserver;
const observable$ = new Rx.Observable(function subscribe(observer) {
console.log('subscribe function has been called');
myObserver = observer;
});
observable$.subscribe(function next1() { console.log('next1'); });
observable$.subscribe(function next2() { console.log('next2'); });
observable$.subscribe(function next3() { console.log('next3'); });
myObserver.next();
