角2 Firebase下拉選擇器

Question

我正在學習Angular 4和firebase。在這裏，我正在嘗試構建一個課程列表的下拉選擇器。

選擇課程後，課程描述應該出現在下面的另一個div中。

courses.component.html

<select class="form-control" 
 
\t  [ngModel]="(selectedCourse$ | async)" 
 
\t \t (ngModelChange)="onChange($event)" 
 
> 
 
<option *ngFor="let course of (courses$ | async)" 
 
\t  [ngValue]="course" 
 
> 
 
    {{ course.description }} 
 
</option> 
 
</select> 
 
\t \t  
 
<div *ngIf="(selectedCourse$ | async)"> 
 
    {{ course.description }} 
 
</div>

courses.component.ts

import { Component, OnInit } from '@angular/core'; 
 
import { Observable } from 'rxjs/Rx'; 
 

 
import { Course } from '../shared/model/course'; 
 
import { CoursesService } from '../shared/model/courses.service'; 
 

 
@Component({ 
 
    selector: 'app-courses', 
 
    templateUrl: './courses.component.html', 
 
    styleUrls: ['./courses.component.css'] 
 
}) 
 
export class CoursesComponent implements OnInit { 
 

 
    courses$: Observable<Course[]>; 
 
    selectedCourse$: Observable<Course>; 
 
    courseUrl: string; 
 

 
    constructor( 
 
     private coursesService: CoursesService 
 
    ) { } 
 

 
    ngOnInit() { 
 
     this.courses$ = this.coursesService.findAllCourses(); 
 

 
     this.selectedCourse$ = this.coursesService.findCourseByUrl(this.courseUrl); 
 
    } 
 

 
    onSelect(course: Course): void { 
 
     console.log(course); 
 
     this.selectedCourse$ = course; 
 
    } 
 

 
    onChange(newValue) { 
 
     console.log(newValue); 
 
     this.selectedCourse$ = newValue; 
 
    } 
 

 
}

我可以選擇課程，但在課程描述將不會出現下面的div。任何幫助都感激不盡。

Answer 1

當你進行選擇時，它不再是一個可觀察的，而是一個普通的JS對象。您用來分配所選值的newValue是一個對象，因此selectedCourse因此是一個對象。

此外，您不能從選擇外部訪問course，就像您試圖在您的條件div中執行操作一樣。所以你應該顯示{{ selectedCourse$.description }}而不是{{ course.description }}所有在你所有的條件的div應該是這樣的（我已經刪除了美元符號）

<div *ngIf="selectedCourse"> 
    {{ selectedCourse.description }} 
</div> 

和你ngModel還應該再只是：

[ngModel]="selectedCourse" 

Demo