Angular 4 NgModel 不绑定数据答案

【问题标题】：Angular 4 NgModel not binding dataAngular 4 NgModel 不绑定数据
【发布时间】：2017-12-05 13:08:50
【问题描述】：

NgModel 没有在这个组件上工作。我已经导入了 FormsModule 和其他东西。 * ngIf 和 angled * ngFor 等其他功能在其他组件上运行良好。也请查看 app.module。

救命！

我为此使用了 firebase 和 angularfire2。

我的组件：

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Params } from '@angular/router';
import { CommonModule } from '@angular/common';

import { AngularFireAuth } from 'angularfire2/auth';
import { AngularFireDatabase, FirebaseObjectObservable } from 'angularfire2/database';
import * as firebase from 'firebase/app';

import { Rating } from '../rating';

import 'rxjs/add/operator/SwitchMap';

@Component({
    selector: 'app-view-rating',
    templateUrl: './view-rating.component.html',
    styleUrls: ['./view-rating.component.css']
})

export class ViewRatingComponent implements OnInit {

    name: any;
    rating: FirebaseObjectObservable<any>;
    user: firebase.User;
    item: any;

    constructor(
        private route: ActivatedRoute,
        private afAut: AngularFireAuth,
        private afDb: AngularFireDatabase) {
            this.afAut.authState.subscribe((auth) => {
                this.user = auth;
            })
        }

    ngOnInit(): void {
        this.name = this.route.snapshot.paramMap.get('item');
        this.rating = this.afDb.object(this.user.uid + '/' + this.name);
        console.log(this.rating)
    }
}

还有 HTML：

<div class="form-container">

    <div *ngIf="rating" >
        <input [(ngModel)]="rating.name" name="name" >
    </div>
    
</div>

【问题讨论】：

您是否在浏览器控制台中遇到任何错误？
@Aravind 不，控制台什么也不显示
@Aravind 我试过这个但没有成功，但又试了一次，现在可以了！是一个简单的错误。我是角度的新手。非常感谢。
出了什么问题？
也为答案投票。

标签： angular firebase angular-ngmodel angularfire2

【解决方案1】：

rating 是observable 类型，你将如何将它用于ngModel。您需要订阅它并分配给其他对象并将该对象用作ngModel

如下声明一个any类型且不可观察的对象，

ratingObject:any;

this.rating = this.afDb.object(this.user.uid + '/' + this.name);
this.rating.subscribe(data =>{
        this.ratingObject = data;
});

然后在下面的HTML中使用，

<div *ngIf="ratingObject" >
    <input [(ngModel)]="ratingObject.name" name="name" >
</div>

【讨论】：