Html 错误："；TypeError:无法读取属性'；秒'；“未定义”的定义；尝试格式化日期字段时

我正在尝试在ionic项目中设置日期字段的格式。正在从Firebase读取此日期字段，我尝试在html页面中对其进行格式化，但出现以下错误： TypeError:无法读取未定义的属性“秒”

奇怪的是，它在屏幕上的显示与我预期的一样，但我不确定为什么会显示控制台错误

附加.html、related.ts和.service.ts

以下是html代码：（请注意，删除格式部分不会出现错误）

最后是一些.service.ts文件

export class PlayersService {

 public playersRef: firebase.firestore.CollectionReference;

   constructor() { 
     this.playersRef = firebase.firestore().collection('/players');   
  }


     getPlayerDetails(playerDetailsId: string): 
    firebase.firestore.DocumentReference {
               return this.playersRef.doc(playerDetailsId);        
         }
 }

this.currentPlayerDetails的console.log的输出

{
  "country": "UK",
  "county": "Warwickshire",
  "dateOfBirth": {
    "seconds": 527986800,
    "nanoseconds": 0
  },
  "firstName": "Kevin",
  "photoLocation": "",
  "position": "Midfield",
  "surname": "Browne",
  "team": "Mens",
  "town": "Birmingham",
  "id": "HVbUmm1KwKjy9fwtsCdP"
}

---

正如错误明确指出的那样，

dateOfBirth

是未定义的，这就是为什么它找不到未定义的属性

seconds

。我建议您尝试使用

currentPlayerDetails

的控制台翻版，看看您从firebase获得了哪些数据

我还看到它返回了一个承诺，请使用async/await确保在ngOnInit完成时可用。这是理解允诺如何工作的很好的参考

更新：解释

您正在将

listener/subscriber

内部

ngOnInit

绑定到

firebase

调用，该调用返回

promise

，并且在

subscriber

内部更新已绑定到角度视图的class属性

currentPlayerDetails

的值。因此，当您的页面加载/inits angular完成其

NgOnInit

生命周期将绑定订阅者挂接到

firebase promise

时，但在

promise

解决之前，它不会拖拽页面加载事件（即数据被提取），但它最终会解析并更新

currentPlayerDetails

类属性

这一切都发生在几秒钟之内，您几乎无法注意到视图中的UI更改。这就是为什么您会在控制台中看到错误（此时promise尚未解决，但页面加载事件正在发生），但UI显示数据（此时所有内容都已加载&promise也已解决），因为该过程是异步的

通过使用

async/await

同步使用承诺的正确方法，这将消除您的控制台错误：

export class PlayerDetailsPage implements OnInit {

    public currentPlayerDetails: any = {};

    constructor(private playersService: PlayersService,
        private helperService: HelperService,
        private route: ActivatedRoute) { }

    ngOnInit() {
        this.fetchPlayerDetails(this.route.snapshot.paramMap.get('id'));
    }

    private async fetchPlayerDetails(playerId: string) {
        const playerDetailsSnapshot = await this.playersService.getPlayerDetails(playerId).get();
        this.currentPlayerDetails = playerDetailsSnapshot.data();
        this.currentPlayerDetails.id = playerDetailsSnapshot.id;
    }
} 

---

正如错误明确指出的那样，

dateOfBirth

是未定义的，这就是为什么它找不到未定义的属性

seconds

。我建议您尝试使用

currentPlayerDetails

的控制台翻版，看看您从firebase获得了哪些数据

我还看到它返回了一个承诺，请使用async/await确保在ngOnInit完成时可用。这是理解允诺如何工作的很好的参考

更新：解释

您正在将

listener/subscriber

内部

ngOnInit

绑定到

firebase

调用，该调用返回

promise

，并且在

subscriber

内部更新已绑定到角度视图的class属性

currentPlayerDetails

的值。因此，当您的页面加载/inits angular完成其

NgOnInit

生命周期将绑定订阅者挂接到

firebase promise

时，但在

promise

解决之前，它不会拖拽页面加载事件（即数据被提取），但它最终会解析并更新

currentPlayerDetails

类属性

这一切都发生在几秒钟之内，您几乎无法注意到视图中的UI更改。这就是为什么您会在控制台中看到错误（此时promise尚未解决，但页面加载事件正在发生），但UI显示数据（此时所有内容都已加载&promise也已解决），因为该过程是异步的

通过使用

async/await

同步使用承诺的正确方法，这将消除您的控制台错误：

export class PlayerDetailsPage implements OnInit {

    public currentPlayerDetails: any = {};

    constructor(private playersService: PlayersService,
        private helperService: HelperService,
        private route: ActivatedRoute) { }

    ngOnInit() {
        this.fetchPlayerDetails(this.route.snapshot.paramMap.get('id'));
    }

    private async fetchPlayerDetails(playerId: string) {
        const playerDetailsSnapshot = await this.playersService.getPlayerDetails(playerId).get();
        this.currentPlayerDetails = playerDetailsSnapshot.data();
        this.currentPlayerDetails.id = playerDetailsSnapshot.id;
    }
} 

---

在处理firebase调用时，您应该使用Async/Await函数，因为几乎所有东西都是异步的，这就是为什么此时它可能没有任何格式化值的原因

---

尝试阅读文章，也许会对您有所帮助。

在处理firebase调用时，您应该使用Async/Wait函数，因为几乎所有调用都是异步的，这就是为什么此时它可能没有任何格式化价值的原因

---

试着阅读这篇文章，也许它会对你有所帮助。

当我在控制台上打印currentPlayerDetails时，如果打印出我所期望的详细信息，那么我认为这不是问题所在。当我从DOB中删除“.seconds*1000”：{currentPlayerDetails？.dateOfBirth.seconds*1000 | date:'d/MMM/yyyy'}时，我没有看到任何错误（这是我的日期打印为不可读的时间戳@AMITKUMARTHEN，请使用

currentPlayerDetails

对象的值更新您的答案，以让我们更深入了解。添加了上述原始问题的输出。非常感谢您的帮助。您的对象的打印格式不是很清晰，使用JSON.stringify（object）进行打印。从您提供的信息来看，它几乎可以像当前PlayerDetails中直接存在的seconds属性一样进行打印。{“国家”：“英国”、“郡”：“沃里克郡”、“出生日期”：{“秒”：527986800，“纳秒”：0}，“名字”：“凯文”，“照片定位”：“位置”：“中场”，“姓氏”：“布朗”，“球队”：“男子”，“城镇”：“伯明翰”，“id”：“hvbumm1kwkjy9fwtsdp”}当我控制台打印currentPlayerDetails时，如果打印我期望的详细信息，那么我认为这不是问题。当我从DOB删除“.seconds*1000”时：{{currentPlayerDetails？.dateOfBirth.seconds*1000 | date:'d/MMM/yyyy}我没有看到任何错误（这是我的日期的负片，打印为不可读的时间戳@amithkumarth，请更新

export class PlayerDetailsPage implements OnInit {

    public currentPlayerDetails: any = {};

    constructor(private playersService: PlayersService,
        private helperService: HelperService,
        private route: ActivatedRoute) { }

    ngOnInit() {
        this.fetchPlayerDetails(this.route.snapshot.paramMap.get('id'));
    }

    private async fetchPlayerDetails(playerId: string) {
        const playerDetailsSnapshot = await this.playersService.getPlayerDetails(playerId).get();
        this.currentPlayerDetails = playerDetailsSnapshot.data();
        this.currentPlayerDetails.id = playerDetailsSnapshot.id;
    }
}