Angular 4 NgModel 未绑定数据

Question

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>

Answer 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>

Angular 4 NgModel 未绑定数据

Angular 4 NgModel not binding data

firebase

angular-ngmodel

angularfire2

angular