Question

我正在学习Angular 4和firebase。在这里，我正在尝试为课程列表构建一个下拉选择器。

选择课程后，课程说明应出现在下面的另一个div中。

courses.component.html

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

当你进行选择时，它不再是一个Observable，而是一个普通的JS对象。您用来分配所选值的newValue是一个对象，因此selectedCourse是一个对象。

此外，您无法从您选择的外部访问course，就像您在条件div中尝试过的那样。那么你应该显示{{ selectedCourse$.description }}而不是{{ course.description }}所有你的条件div应该是这样的（我已经删除了美元符号）

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

然后您的ngModel也应该只是：

[ngModel]="selectedCourse"

Demo

angular 2 firebase下拉选择器

1 个答案: