Question

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

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

附加.html，相关的.ts和.service.ts

这是html代码：（请注意，删除格式部分我没有收到错误）

   <ion-item>
       <ion-label>
           DOB: <font>{{currentPlayerDetails?.dateOfBirth.seconds * 1000 | 
                       date:'d/MMM/yyyy' }}</font>
       </ion-label>
    </ion-item>

相关.ts文件的片段

 export class PlayerDetailsPage implements OnInit {

   public currentPlayerDetails: any = {};

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

   ngOnInit() {
      const playerId: string = this.route.snapshot.paramMap.get('id');
       this.playersService.getPlayerDetails(playerId).get()
       .then(playerDetailsSnapshot=> {
          this.currentPlayerDetails = playerDetailsSnapshot.data();
          this.currentPlayerDetails.id = playerDetailsSnapshot.id;

       });
  }
 }

最后还有一些.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"
}

Answer 1

正如错误明确指出的那样，dateOfBirth是未定义的，这就是为什么它找不到未定义的属性seconds的原因。我建议尝试使用currentPlayerDetails的控制台定价，看看您从firebase获得了什么数据。

我也看到它返回了一个承诺，请使用sync / await来确保ngOnInit完成时该可用。此blog是理解诺言如何工作的很好参考。

更新：说明

您将listener/subscriber内的ngOnInit绑定到firebase的调用，该调用返回一个promise，并且在subscriber内，您正在更新类属性{ {1}}已绑定到角度视图。因此，当您的页面加载/初始化angular时，它完成了currentPlayerDetails的生命周期挂钩以将订户绑定到NgOnInit，但是直到firebase promise解析（即数据已提取）时，它才不会干扰页面加载事件，但是它最终会解析并更新promise类属性。

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

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

async/await

Answer 2

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

尝试阅读this帖子，也许会对您有所帮助。

尝试格式化日期字段时出现错误：“ TypeError：无法读取未定义的属性“秒数”

2 个答案: