Angular: Setzen Sie den ausgewählten Wert für <select>

Question

Ich habe Daten für meine <select> asynchron geladen. Ich benutze heiß beobachtbar, da sich die Daten im Laufe der Zeit ändern können. Das Problem ist, dass ich den ausgewählten Wert nicht setzen kann und auch Angular nicht auf das erste Element selbst zeigt (es gibt keinen Wert, bis der Benutzer es tut). Ich versuche mein eigenes Observable zu abonnieren und ... es funktioniert nicht, ich frage mich warum? Wie kann ich dieses Problem lösen?

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

Sie zweimal auf Ihre beobachtbare abonnieren. Async-Pipe macht es intern nach Ihrem Abonnement.

Wenn subscribe Verfahren ausgeführt wird es subscribe Funktion

observer => this.observer = observer 

und überschreibt this.observer Eigenschaft ausführt, so dass es nur wirksam für async Rohr (letzte Teilnehmer)

haben I share Bediener es benutzen würde zu lösen

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

Plunker Example

Um zu sehen, warum this.observer nur

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

Wie ich früh async Rohr abonniert beobachtbaren erwähnt intern

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

Answer 2

Sie mit

[ngValue]="value" 

statt [Wert] sollte

Wert als

Assigned

public selectedValue: string = 'test'; 

HTML sollte geändert, wie

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

Updated Plunker

Answer 3

Sie es ngValue binden sollte:

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