Angular：为< select>设置选定的值 [英] Angular: set selected value for <select>

问题描述

我为异步加载的< select> 设置了数据集。我使用hot observable，因为数据可以及时改变。问题是我无法设置选定的值，并且Angular也没有指向第一个元素（在用户执行之前没有设置值）。我正在尝试订阅我自己的观察结果......它不起作用，我想知道为什么？我该如何解决这个问题？

I have data set for my <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?

PLNKR： https： //plnkr.co/edit/uDmTSHq4naYGUjjhEe5Q

@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();
    }
  }
}

推荐答案

您订阅了两次您的观察。订阅后异步管道在内部执行。

You subscribe to your observable twice. Async pipe does it internally after your subscription.

当订阅方法正在执行时，它会执行 subscribe 功能

When subscribe method is being executed it executes subscribe function

observer => this.observer = observer

并覆盖 this.observer 属性所以它只对异步管道（最后一个用户）有效

and overrides this.observer property so it will have effect only for async pipe(last subscriber)

我会用 share 运算符来解决它

new Observable(observer => this.observer = observer).share();

Plunker示例

Plunker Example

了解为什么 this.observer 被覆盖只需运行此代码

To see why this.observer is overrided just run this code

let 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();

jsbin.com

正如我提到的早期异步管道订阅内部可观察

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

这篇关于Angular：为< select>设置选定的值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！