javascript - 奇怪的javascript变量转储

Question

当调用console.dir(myVariable)时，我得到了这个奇怪的结果:

JS: === dump(): dumping function and properties names  ===                                                                          
JS: 0:  [                                                                                                                           
JS: 1: o                                                                                                                           
JS: 2: b                                                                                                                           
JS: 3: j                                                                                                                           
JS: 4: e                                                                                                                           
JS: 5: c                                                                                                                           
JS: 6: t                                                                                                                           
JS: 7:                                                                                                                             
JS: 8: O                                                                                                                           
JS: 9: b                                                                                                                           
JS: 10: j                                                                                                                          
JS: 11: e                                                                                                                          
JS: 12: c                                                                                                                          
JS: 13: t 
JS: 14: ]
JS: === dump(): finished ===          

这是什么意思？为什么我没有得到标准对象或数组输出？

请注意，我无法使用 chrome/firefox 开发工具，因为我是从 Telerik NativeScript 框架进行编码的。

此外，我还从 Angular 2 中构建的组件的“代码隐藏”中调用此代码。

这是资源管理器组件的 html，explorer.html:

<ActionBar title="{{ 'activity_explorer' | L }}" android.icon="res://icon"
    android.iconVisibilty="always">
    <ActionItem icon="res://icon_plus" text="{{'menuitem_new' | L}}" (tap)="showMenuItemNew()"></ActionItem>
    <ActionItem [icon]="selectionModeIcon()" text="selectionModeItemText()" (tap)="toggleSelectionMode()"></ActionItem>
</ActionBar>

<GridLayout rows="1*, 12*" modal-dialog-host>

    <Label class="path_component" row="0" [text]="_path" textWrap="true"> </Label>

    <ListView row="1" [items]="_files">
        <template let-item="item">
            <loloof64-explorer-item-line [checkboxVisible]="_selectionMode" item="{{item}}"></loloof64-explorer-item-line>
        </template>
    </ListView>

 </GridLayout>

这是explorer_item_line组件的html:explorer_item_line.html

<GridLayout columns="1*, 1*, 7*">
    <loloof64-checkbox #check_comp col="0" [visible]="checkboxVisible"> </loloof64-checkbox>
    <Image col="1"  (tap)="handleTap()" src="res://folder"></Image>
    <Label col="2"  (tap)="handleTap()" text="Text" textWrap="true">   </Label>
</GridLayout>

这是 ExploreItem 类:

export class ExplorerItem {

    private _name: string;
    private _isDirectory: boolean;

    constructor(name: string, isDirectory: boolean){
        this._name = name;
        this._isDirectory = isDirectory;
    }

    name(){
        return this._name;
    }

    isDirectory(){
        return this._isDirectory;
    }

    public isParent() : boolean {
        return this._name === ".." && this._isDirectory;
    }

    public static sort(left: ExplorerItem, right: ExplorerItem): number {
        if (left.isDirectory() === right.isDirectory()) { 
            return left.name().toLowerCase().localeCompare(right.name().toLowerCase());
        }
        else {
            return left.isDirectory() ? -1 : 1;
        }
    }
}

这是explorer_item_line.ts:

import {Component, Input, ViewChild} from '@angular/core';
import {Checkbox} from "../checkbox/checkbox";
import {ExplorerItem} from "./explorer_item";

import * as _ from 'lodash';

@Component({
    moduleId: module.id,
    selector: 'loloof64-explorer-item-line',
    templateUrl: 'explorer_item_line.html',
    styleUrls: ['explorer_item_line.css'],
    directives: [Checkbox]
})
export class ExplorerItemLine {
    @Input() checkboxVisible: boolean = false;
    @Input() item: any;
    @ViewChild('check_comp') checkboxComp: Checkbox;

    handleTap(){
        if (this.checkboxVisible){
            this.checkboxComp.checked = ! this.checkboxComp.checked;
        }

        console.log(JSON.stringify(this.item))
    }
}

我认为这是 explorer 和 explorer_item_line 组件之间的绑定(bind)问题，但我不知道为什么以及如何解决它。

最后，我到达了 Nativescript 调试页面:所以我应该能够在 Chrome 的开发者工具中检查它。

Answer 1

item="{{item}} 是 NativeScript 核心绑定(bind)的语法..其中 NativeScript+Angular-2 您应该使用 ng-style，这意味着 [item]="item ” 在 ng-app 中使用核心语法将导致返回的值是 [object Object] 类型，而不是您期望的值。