Angular-TypeError：無法讀取未定義的屬性（讀取'reduce）

當我嘗試執行這段代碼時，這就是我得到的。

發生錯誤的第 82 行是： var group = this.detailsDate.reduce(function (r, o){

core.js:6486 錯誤型別錯誤：無法在 DashboardComponent.ngOnInit (dashboard.component.ts:56) 的 DashboardComponent.getDatesOnly (dashboard.component.ts:82) 讀取未定義的屬性（讀取“reduce”）

 getDatesOnly(){
       this.requestService.getAllRequests().subscribe(data=>{
         JSON.stringify(data);
         this.requestAllDetails=data
          var alldates = this.requestAllDetails.map(t=>t.startDate)
           this.detailsDate = alldates;
          console.log(alldates)
     })
     //above code returns array containing dates only
     

     //returns array with month   count
     var monthNames = [
         "January", "February", "March",
         "April", "May", "June",
         "July", "August", "September",
         "October", "November", "December"
     ];

     var group = this.detailsDate.reduce(function (r, o){
         var date = new Date(o);
         var month = date.getMonth();
         var monthName = monthNames[month];
         (r[monthName]) ? r[monthName].count   : r[monthName] = { monthName: monthName, count: 1 };
         return r;
     }, {});

     var result = Object.keys(group).map((key) => group[key]);

     console.log(result);

 }

uj5u.com熱心網友回復：

// Top of your file
const monthNames = [
  "January",
  "February",
  "March",
  "April",
  "May",
  "June",
  "July",
  "August",
  "September",
  "October",
  "November",
  "December"
];

class YourComponent ... {
  getDatesOnly(){
    this.requestService
    .getAllRequests()
    .subscribe(data => {
      this.requestAllDetails = [...data] // You didn't specified but i pretend this is an array
      const alldates = this.requestAllDetails.map(t => t.startDate)
      this.detailsDate = allDates.reduce(function (r, o){
         const date = new Date(o);
         const month = date.getMonth();
         const monthName = monthNames[month];
         (r[monthName]) ? r[monthName].count   : r[monthName] = { monthName: monthName, count: 1 };
         return r;
      }, {});
      const result = Object.keys(this.detailsDate).map((key) => group[key]);
      console.log(result);
    });
 }

subscribe 方法是異步的，這意味著您的代碼首先執行 reduce，然后才執行 subscribe 回呼

uj5u.com熱心網友回復：

您收到此錯誤的原因是因為detailsDateget 在訂閱方法中填充了資料，這意味著此代碼不是同步的。

該observer模式是一種適用于 Angular 的軟體設計模式，其中一個物件稱為主體，維護其依賴項串列，稱為觀察者，并自動通知它們任何狀態更改。這種模式實際上非常類似于發布/訂閱設計模式（通常通過訊息佇列在服務器中實作，如 Kafka 或 Azure 服務總線）。

Observable 是宣告性的，這意味著您定義了一個用于發布值的函式，但在消費者訂閱它之前它不會執行。訂閱的消費者然后會收到通知，直到函式完成（或直到他們取消訂閱）。

訂閱用于處理異步方法呼叫。因此，subscribe()只有在異步方法回傳其結果時（例如在 http 呼叫之后）才會執行方法內的代碼。在等待異步回應時，程式會繼續執行以下代碼，這就是您的代碼沒有按預期作業的原因。

您可以將縮減邏輯移動到訂閱以使其作業。

getDatesOnly(){
       var monthNames = [
         "January", "February", "March",
         "April", "May", "June",
         "July", "August", "September",
         "October", "November", "December"
     ];
          
       this.requestService.getAllRequests().subscribe(data=>{
         JSON.stringify(data);
         this.requestAllDetails=data
          var alldates = this.requestAllDetails.map(t=>t.startDate)
           this.detailsDate = alldates;
          console.log(alldates)
          
         var group = this.detailsDate.reduce(function (r, o){
         var date = new Date(o);
         var month = date.getMonth();
         var monthName = monthNames[month];
         (r[monthName]) ? r[monthName].count   : r[monthName] = { monthName: monthName, count: 1 };
         return r;
     }, {});

     var result = Object.keys(group).map((key) => group[key]);
     console.log(result);
     })


 }

更多關于 observables 和訂閱者的資訊可以在這里找到 - https://angular.io/guide/observables

標籤：有角的

上一篇：每個下拉串列的單獨HTTP請求或一個胖FormViewModel的單個請求？

下一篇：如何在angular中點擊添加活動類？