angular - IONIC 4:无法读取未定义的属性“获取”
问题描述
我正在尝试通过该get()
函数从数据库中获取一些信息,但是当我尝试运行它时,它会得到标题的错误,说明
at HomeTabPage.push ../src/app/home-tab/home-tab.page.ts.HomeTabPage.ngOnInit (home-tab.page.ts: 18)
否 *ngFor 我已经尝试使用 Elvis 参数,但它不起作用。我已经从 ngOnInit 传递了我的 main 函数并声明了另一个要引用的函数,但是它不起作用。
主页-tab.page.html
<ion-list >
<ion-item *ngFor="let advert of advertList">
<ion-thumbnail slot="start">
<ion-img src="advert?.image"></ion-img>
</ion-thumbnail>
<ion-label>
<h2 >{{advert?.name}}</h2>
<h3 >{{advert?.price}}</h3>
<p >{{advert?.description}}</p>
</ion-label>
</ion-item>
</ion-list>
主页-tab.page.ts
export class HomeTabPage implements OnInit {
public advertList: Array<any>;
constructor(private navCtrl: NavController, public adService: AdvertisingService) {}
ngOnInit(){
this.adService.getAdAllList().get().then(advertListSnapshot => {
this.advertList = [];
advertListSnapshot.forEach(snap =>{
this.advertList.push({
id: snap.id,
name: snap.data().name,
price: snap.data().price,
description: snap.data().description,
image: snap.data().picture
});
});
});
}
}
服务.ts
export class AdvertisingService {
public adAllListRef: firebase.firestore.CollectionReference;
constructor() {
firebase.auth().onAuthStateChanged(user => {
if (user) {
this.adAllListRef = firebase.firestore().collection(`/adverts/adAll/adList`);
}
});
}
//cRud -> Read
getAdAllList(): firebase.firestore.CollectionReference {
return this.adAllListRef;
}
}
错误
HomeTabPage_Host.ngfactory.js? [sm]:1 ERROR TypeError: Cannot read property 'get' of undefined
at HomeTabPage.push../src/app/home-tab/home-tab.page.ts.HomeTabPage.ngOnInit (home-tab.page.ts:18)
at checkAndUpdateDirectiveInline (core.js:22099)
at checkAndUpdateNodeInline (core.js:23363)
at checkAndUpdateNode (core.js:23325)
at debugCheckAndUpdateNode (core.js:23959)
at debugCheckDirectivesFn (core.js:23919)
at Object.eval [as updateDirectives] (HomeTabPage_Host.ngfactory.js? [sm]:1)
at Object.debugUpdateDirectives [as updateDirectives] (core.js:23911)
at checkAndUpdateView (core.js:23307)
at callViewAction (core.js:23548)
解决方案
好的,您的代码尚未处理一种情况。如果user
在中未定义firebase.auth().onAuthStateChanged
怎么办?你this.adAllListRef
不会被初始化,所以在这种情况下你也会得到同样的错误。
我可能无法提供有效的代码,但我可以建议您处理此问题的方法:
由于此页面仅在有效时才user
有效,因此请尝试使用AuthGuard,它可能类似于:
import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router, Route } from '@angular/router';
import { Observable } from 'rxjs';
@Injectable()
export class AuthGuard implements CanActivate {
constructor(private _router: Router,private _advSvc: AdvertisingService) {
}
canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot): Promise<boolean>
{
return new Promise((resolve) => {
firebase.auth().onAuthStateChanged(user => {
if (user) {
resolve(true);
}else{
this._router.navigate(['/login']);
resolve(false);
}
});
}
}
在AdvertisingService中,您不需要检查,user
因为它只是被调用,因为AuthGuard
已经验证了用户。
export class AdvertisingService {
constructor() {
}
getAdAllList(): firebase.firestore.CollectionReference {
return firebase.firestore().collection(`/adverts/adAll/adList`);
}
}
并定义router
为:
const route = [
{ .... },
{path: '/home',component: HomeTabPage, canActivate: [AuthGuard] },
{path: '/login',component: LoginPage }
]
推荐阅读
- javascript - PageYOffset 说明
- javascript - Javascript / HTML在鼠标单击时将照片添加到中心位置
- api - Roundcube休息api
- java - 转换列表
- > 流式传输
> - asp.net-core - 我可以在 AspNetCore WebAPI 中将 CancellationToken 作为参数传递吗
- flutter - 如何在 Flutter 中制作 Font Family Fallback?
- python - 如何在函数循环之外定义参数?
- node.js - 如何通过单击外部菜单和菜单项来关闭“react-burger-menu”
- android - 如何在 Android Studio 4.1 中默认启用 Kotlin Android 扩展
- appium - appium ios测试在部分电脑上运行缓慢的可能原因