Angular 4 NgModel 不绑定数据

Question

NgModel 不在此组件上运行。我已经导入了表单模块和其他东西。其他功能，如* ngIf和倾斜的* 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>