Angular：設置選定的值<select>

Question

我為異步加載的<select>設置了數據集。 我使用hot observable，因為數據可以及時改變。 問題是我無法設置選定的值，並且Angular也沒有指向第一個元素（在用戶執行之前沒有設置值）。 我正在嘗試訂閱我自己的觀察結果......它不起作用，我想知道為什么？ 我怎么解決這個問題？

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

Answer 1

您訂閱了兩次您的觀察。 訂閱后異步管道在內部執行。

當正在執行subscribe方法時，它執行subscribe函數

observer => this.observer = observer

並覆蓋this.observer屬性，因此它只對異步管道（最后一個訂閱者）有效

我會用share運算符來解決它

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

Plunker示例

要了解為什么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

正如我所提到的，早期的異步管道在內部訂閱了observable

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

Answer 2

你應該使用

[ngValue]="value" 

而不是[值]

將值指定為

public selectedValue: string = 'test';

HTML應該更改為

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

更新了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>