javascript - Angular: קביעת ערך נבחר עבור <select>

יש לי סט נתונים עבור <select> שלי שנטען באופן אסינכרוני. אני משתמש ב-Hot Observable, מכיוון שהנתונים יכולים להשתנות עם הזמן. הבעיה היא שאני לא מצליח להגדיר ערך נבחר וגם Angular לא מצביע על האלמנט הראשון בעצמו (אין ערך מוגדר עד שהמשתמש עושה זאת). אני מנסה להירשם ל-Observable שלי ו... זה לא עובד, אני תוהה למה? איך אני יכול לפתור את הבעיה הזו?

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

תשובה #1

אתה מנוי למתצפה שלך פעמיים. הצינור האסינכרוני עושה את זה בתוך הפנימי אחרי המנוי שלך.

כאשר מתבצעת הפעלת השיטה subscribe, היא מבצעת את הפונקציה subscribe

observer => this.observer = observer

ומחליפה את התכונה this.observer כך שהיא תשפיע רק על ה-async pipe (המנוי האחרון)

הייתי משתמש ב-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

כמו שציינתי קודם, הצינור האסינכרוני מנוי למתבונן באופן פנימי

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

תשובה #2

אתה צריך להשתמש

[ngValue]="value" 

במקום [value]

הוקצה ערך כ

public selectedValue: string = 'test';

יש לשנות את ה-HTML כך

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

פלונקר מעודכן