javascript - 'AngularFireList<{}> 类型中缺少 Angular 属性'$ref'
问题描述
我收到了这个错误
/Users/macmini/Desktop/newap/src/app/component/content/content.component.ts (18,5):类型“AngularFireList<{}>”不可分配给类型“FirebaseListObservable”。
“AngularFireList<{}>”类型中缺少属性“$ref”。
组件.ts
import { Component, OnInit } from '@angular/core';
import {Subscription} from 'rxjs';
import {AngularFireDatabase } from 'angularfire2/database';
import {FirebaseListObservable} from 'angularfire2/database-deprecated';
@Component({
selector: 'app-content',
templateUrl: './content.component.html',
styleUrls: ['./content.component.css']
})
export class ContentComponent implements OnInit {
courses$:FirebaseListObservable<any[]>;
constructor(db:AngularFireDatabase){
this.courses$ = db.list('/courses');
}
ngOnInit() {
}
}
组件.html
<ul *ngFor="let item of (courses$ | async)">
<li><a href="#">{{item.$value}}</a>
</li>
</ul>
应用模式
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {AngularFireModule} from 'angularfire2'
import {AngularFireDatabaseModule} from 'angularfire2/database'
import {environment} from '../environments/environment';
import { AppComponent } from './app.component';
import { ContentComponent } from './component/content/content.component';
@NgModule({
declarations: [
AppComponent,
ContentComponent,
],
imports: [
BrowserModule,
AngularFireModule.initializeApp(environment.firebase),
AngularFireDatabaseModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
软件包.ison
{
"name": "newap",
"version": "0.0.0",
"license": "MIT",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular/animations": "^4.0.0",
"@angular/common": "^4.0.0",
"@angular/compiler": "^4.0.0",
"@angular/core": "^4.0.0",
"@angular/forms": "^4.0.0",
"@angular/http": "^4.0.0",
"@angular/platform-browser": "^4.0.0",
"@angular/platform-browser-dynamic": "^4.0.0",
"@angular/router": "^4.0.0",
"angularfire2": "^5.0.0-rc.3",
"core-js": "^2.4.1",
"firebase": "^4.7.0",
"rxjs": "^5.0.1",
"xjs": "^0.1.6",
"zone.js": "^0.8.4"
},
"devDependencies": {
"@angular/cli": "1.1.0",
"@angular/compiler-cli": "^4.0.0",
"@angular/language-service": "^4.0.0",
"@types/jasmine": "2.5.45",
"@types/node": "~6.0.60",
"angular2": "^2.0.0-beta.21",
"codelyzer": "~3.0.1",
"jasmine-core": "~2.6.2",
"jasmine-spec-reporter": "~4.1.0",
"karma": "~1.7.0",
"karma-chrome-launcher": "~2.1.1",
"karma-cli": "~1.0.1",
"karma-coverage-istanbul-reporter": "^1.2.1",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.1.2",
"ts-node": "~3.0.4",
"tslint": "~5.3.2",
"typescript": "~2.3.3"
}
}
我使用版本 angular 和 nodejs @angular/cli: 1.1.0 node: 8.11.2 os: darwin x64
解决方案
我相信这个问题与您使用不推荐使用的访问列表数据的方法有关。有关访问列表的相关 Angularfire2 文档,请参阅此链接。
它提供了这个不使用 a 的例子FirebaseListObservable
:
import { Component } from '@angular/core';
import { AngularFireDatabase } from 'angularfire2/database';
import { Observable } from 'rxjs';
@Component({
selector: 'app-root',
template: `
<ul>
<li *ngFor="let item of items | async">
{{ item | json }}
</li>
</ul>
`,
})
export class AppComponent {
items: Observable<any[]>;
constructor(db: AngularFireDatabase) {
this.items = db.list('items').valueChanges();
}
}
推荐阅读
- python - 如何获取频道的会员电报
- api - 如何使用 Cirium API 计算航线距离
- flutter - Flutter Streambuilder 映射到 List 对象
- hive - 如何使用 hive-site.xml 设置 hive 表的 tblproperties 或如何通过在 hive-site.xml 中设置属性将所有表创建为事务表
- google-sheets - 如何从用户读取 excel 文件并生成 Google Sheet 文件
- azure - Azure 流分析作业的运行时错误
- swift - Swift URL 会话:即使出现服务器错误 [404、500],进度条也会增加
- c++ - C++程序获取当前时间
- angularjs - AngularJS 无法执行文件上传
- python - TensorFlow Serving REST API - JSON 解析错误