角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