Javascript typescript对象属性有数据,父对象显示与空对象相同的属性

Javascript typescript对象属性有数据,父对象显示与空对象相同的属性,javascript,typescript,javascript-objects,Javascript,Typescript,Javascript Objects,我看到一些奇怪的行为,当记录到控制台(并在其他地方使用)时,作为对象属性的数组出现填充,但当记录父对象时,它将属性显示为空。当此父对象返回到调用函数时,属性保持为空 这是菜单类: import { MenuItem } from './menu-item'; export class Menu { category: string; label?: string; itemArray: MenuItem[] = []; displayArray: MenuItem[] = []

我看到一些奇怪的行为,当记录到控制台(并在其他地方使用)时,作为对象属性的数组出现填充,但当记录父对象时,它将属性显示为空。当此父对象返回到调用函数时,属性保持为空

这是菜单类:

import { MenuItem } from './menu-item';

export class Menu {
  category: string;
  label?: string;
  itemArray: MenuItem[] = [];
  displayArray: MenuItem[] = [];
  masterArray: MenuItem[] = [];
  singleChoice: boolean = false;
  isDisplaying: boolean = true;
  isCategory( s: string ) { return this.category = s; };
}
以下是MenuItem类(它可以以比此处更复杂的方式使用):

下面是一些构造这些对象的代码。请注意,当类别为“date”且项的属性为硬编码时,itemArray会自行填充,并且在控制台中通过其父对象查看时也会填充。对于所有其他类别,它都失败了

initializeMenu(category: string, categoryName: string): Menu {
  let m = new Menu();
  m.category = category;
  m.label = this.categoryNameArray[this.categoryArray.indexOf(category)]? this.categoryNameArray[this.categoryArray.indexOf(category)]: category;
  switch( category ) {
    case "date":
      let propArray = [
                        {label:"Today",value:"today",hideFromMenu:false},
                        {label:"Day",value:"day",hideFromMenu:true},
                        {label:"This Week",value:"this week",hideFromMenu:false},
                        {label:"Next Week",value:"next week",hideFromMenu:false},
                        {label:"This Month",value:"this month",hideFromMenu:false},
                        {label:"Month",value:"month",hideFromMenu:true}
                      ];
      for(let p of propArray) {
        let i: MenuItem = new MenuItem();
        i.label = p.label;
        i.value = p.value;
        i.hideFromMenu = p.hideFromMenu;
        i.parentMenu = m;
        m.itemArray.push(i);
        // if( ! p.hideFromMenu ) m.displayArray.push(i);
      }
      m.isDisplaying = false;
      m.singleChoice = true;
      m.displayArray = this.getDisplayableDates(m.itemArray);
      m.masterArray = m.itemArray;
      return m;
      // break;
    default:
      let categoryIDs = this.makeContentSet(this.getMenuItemIDs(this.contentItems,category));
      for(let id of categoryIDs){
        let mi = new MenuItem();
        mi.parentMenu = m;
        mi.label = id;
        mi.value = id;
        m.itemArray.push(mi);
      }
      m.displayArray = m.itemArray;
      // m.displayArray = m.itemArray.filter(function(i){return ! i.hideFromMenu});
      m.isDisplaying = false;
      m.singleChoice = false;
      m.masterArray = m.itemArray;
// THIS IS WHERE IT GETS WEIRD. THE FIRST LOG SHOWS A POPULATED 
// m.displayArray, THE SECOND LOG SHOW A PARENT OBJECT WITH POPULATED   
// VALUES FOR EACH ARRAY, THE THIRD LOG SHOWS EMPTY VALUES FOR THE ARRAYS
// IN m. WEIRDER, m SHOWS POPULATED ARRAYS WHEN COLLAPSED IN THE CONSOLE, 
// BUT EMPTY ONES WHEN EXPANDED. SEE SCREENSHOT.
      console.log(m.displayArray);
      console.log(Object.values(m));
      console.log(m);
      return m;
      // break;
  }
}

我认为这实际上是Chrome中的一个bug。只是控制台有点奇怪。我发现我的应用程序的问题是由于其他原因造成的,但这被错误的调试信息隐藏了。

注意,这是Angular 2应用程序的一部分。不过,我认为这并不重要。我认为这实际上是Chrome中的一个bug。只是控制台有点奇怪。我发现我的应用程序的问题是由于其他原因造成的,但这被错误的调试信息隐藏了。请将鼠标悬停在菜单旁边的
I
。这不是一个错误,这是一个错误的切换箭头做什么。谢谢。我刚刚浏览了Chrome控制台文档,没有提到当你点击箭头时会显示什么。有一点是关于您可以让它以xml等形式显示它的事实,但没有关于何时计算该对象。为什么以后计算它意味着数组是空的?如果数组是空的,则应用程序将更新为这些效果,而事实并非如此。我建议记录类似于
JSON.stringify(m)
(如果没有循环引用);这将使您获得日志发生时的对象结构。我没有调查问题发生的原因,只是想告诉您初始日志和对象中的值不同步。
initializeMenu(category: string, categoryName: string): Menu {
  let m = new Menu();
  m.category = category;
  m.label = this.categoryNameArray[this.categoryArray.indexOf(category)]? this.categoryNameArray[this.categoryArray.indexOf(category)]: category;
  switch( category ) {
    case "date":
      let propArray = [
                        {label:"Today",value:"today",hideFromMenu:false},
                        {label:"Day",value:"day",hideFromMenu:true},
                        {label:"This Week",value:"this week",hideFromMenu:false},
                        {label:"Next Week",value:"next week",hideFromMenu:false},
                        {label:"This Month",value:"this month",hideFromMenu:false},
                        {label:"Month",value:"month",hideFromMenu:true}
                      ];
      for(let p of propArray) {
        let i: MenuItem = new MenuItem();
        i.label = p.label;
        i.value = p.value;
        i.hideFromMenu = p.hideFromMenu;
        i.parentMenu = m;
        m.itemArray.push(i);
        // if( ! p.hideFromMenu ) m.displayArray.push(i);
      }
      m.isDisplaying = false;
      m.singleChoice = true;
      m.displayArray = this.getDisplayableDates(m.itemArray);
      m.masterArray = m.itemArray;
      return m;
      // break;
    default:
      let categoryIDs = this.makeContentSet(this.getMenuItemIDs(this.contentItems,category));
      for(let id of categoryIDs){
        let mi = new MenuItem();
        mi.parentMenu = m;
        mi.label = id;
        mi.value = id;
        m.itemArray.push(mi);
      }
      m.displayArray = m.itemArray;
      // m.displayArray = m.itemArray.filter(function(i){return ! i.hideFromMenu});
      m.isDisplaying = false;
      m.singleChoice = false;
      m.masterArray = m.itemArray;
// THIS IS WHERE IT GETS WEIRD. THE FIRST LOG SHOWS A POPULATED 
// m.displayArray, THE SECOND LOG SHOW A PARENT OBJECT WITH POPULATED   
// VALUES FOR EACH ARRAY, THE THIRD LOG SHOWS EMPTY VALUES FOR THE ARRAYS
// IN m. WEIRDER, m SHOWS POPULATED ARRAYS WHEN COLLAPSED IN THE CONSOLE, 
// BUT EMPTY ONES WHEN EXPANDED. SEE SCREENSHOT.
      console.log(m.displayArray);
      console.log(Object.values(m));
      console.log(m);
      return m;
      // break;
  }
}