角2模板使用console.log

angular

2016-11-15 123 views 13 likes

我想在内联模板中使用console.log，但找不到任何方向。角2模板使用console.log

@Component({ 
    selector:"main", 
    providers: [ItemService], 
    template:` 
    <ul> 
    <li *ngFor="let item of items"> 
     {{console.log(item)}} <----- ??? 
     <p>{{item.name}}</p> 
    </li> 
    </ul> 

    ` 
}) 
export class HomeComponent { 
    private items: Array<ItemModel>; 

    constructor() {} 
}

来源

2016-11-15 emvidi

这是没有意义的。 'console.log'不会返回任何东西，所以你将'undefined'绑定到你的HTML中。你究竟在努力实现什么？如果您想查看每个项目的详细信息以进行调试，请考虑将'{{item | json}}'代替，或者只是遍历列表并将其记录到类中，无论您何时访问它。 – jonrsharpe

@jonrsharpe我只想检查项目，然后删除console.log（item） – emvidi

但是*“检查项目”* *实际*意味着*？如果您只想查看其内容，请按照我和Günter的建议使用JSON管道。如果没有，请澄清你*做的*想要什么 - 为什么你想在控制台，特别是？ – jonrsharpe

回答

无法访问全局，静态，...

您只能组件的访问性能视图所属。

您可以添加

log(val) { console.log(val); }

到您的组件，并使用它像

{{log(item)}}

但准备这是经常登录（每次变化检测运行）。

为了调试，我更喜欢

{{item | json}}

来源

2016-11-15 10:24:51

@Guenter好的，我明白你的意思 – emvidi

更好的方式来做到这一点：

这样你就可以访问模板侧

所有控制台属性组件方：

export class AppComponent { 
    console = console; 
}

模板侧：

{{ console.log('----------------> Logging') }} 
{{ console.warn('----------------> Warning') }} 
{{ console.error('----------------> error') }}

WORKING DEMO

来源

2017-11-03 05:28:28

是他们的缺点吗？ – user2080105

@ user2080105，不会，它只会控制每次刷新视图。 –

角2模板使用console.log

回答

相关问题