Question

我为我的＆lt; select＆gt;设置了数据集异步加载。我使用hot observable，因为数据可以及时改变。问题是我无法设置选定的值，并且Angular也没有指向第一个元素（在用户执行之前没有设置值）。我试图订阅我自己的观察者......它不起作用，我想知道为什么？我怎么解决这个问题？ PLNKR：https：//plnkr.co/edit/uDmTSHq4naYGUjjhEe5Q @零件（{ 选择器：＆＃39; my-app＆＃39;，模板：` ＆LT; DIV＆GT; ＆lt; h2＆gt; Hello {{name}}＆lt; / h2＆gt; ＆LT; / DIV＆GT; ＆lt; select [（ngModel）] =＆＃34; selectedValue＆＃34;＆gt; ＆lt; option * ngFor =＆＃34; let value（values $ | async）＆＃34; [value] =＆＃34;值＆＃34;＆gt; {{value}} ＆LT; /选项＆GT; ＆LT; /选择＆GT; ` }） export class App实现OnInit，OnDestroy { 公共名称：string; public selectedValue：string =＆＃39;＆＃39 ;; 公共值$：Observable＆lt; Array＆lt; string＆gt;＆gt; = new Observable（observer =＆gt; this.observer = observer）; protected observer：Subscriber＆lt; Array＆lt; string＆gt;＆gt ;; 受保护的订阅：订阅; constructor（）{ this.name =`Angular！ V $ {VERSION.full}` } ngOnInit（）{ this.subscription = this.values $ .subscribe（（values）=＆gt; { console.log（＆＃39;永远不会被解雇......＆＃39;）; this.selectedValue = values [0]; }）; setTimeout（（）=＆gt; { this.observer.next（[＆＃39; some＆＃39;，＆＃39; test＆＃39;，＆＃39; data＆＃39;]）; }）; } ngOnDestroy（）{ if（this.subscription）{ this.subscription.unsubscribe（）; } } }

Answer 1

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

当执行subscribe方法时，它会执行subscribe函数

observer => this.observer = observer

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

我会使用share运算符来解决它

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

<强> Plunker Example

要查看为什么this.observer被覆盖，请运行此代码

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

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

https://github.com/angular/angular/blob/4.3.x/packages/common/src/pipes/async_pipe.ts#L23

Answer 2

您应该使用

[ngValue]="value"

而不是[value]

将值指定为

public selectedValue: string = 'test';

HTML应更改为

<select [(ngModel)]="selectedValue">
  <option *ngFor="let value of values$ | async"
          [ngValue]="value">{{ value }}
  </option>
</select>

<强> Updated Plunker

Answer 3

您应该将其绑定到ngValue：

  <div>
      <h2>Hello {{name}}</h2>
    </div>
    <select [(ngModel)]="selectedValue">
      <option *ngFor="let value of (values$ | async)"
              [ngValue]="selectedValue">{{ value }}
      </option>
    </select>

Angular：为<select>设置选定的值

3 个答案: