angular 2 模板使用console.log

Question

我想在内联模板中使用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() {}
}

Answer 1

你不能访问全局，静态，......

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

你可以添加一个

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

你的组件，并使用它

{{log(item)}} 

但要做好准备，以便经常记录（每次更改检测都会运行）。

对于调试，我更喜欢

 {{item | json}} 

Answer 2

更好的方法：

这样您就可以访问模板端的所有控制台属性

---

组件方面：

export class AppComponent  {
  console = console;
}

模板面：

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

工作演示

Answer 3

一种简单的调试方法是为此创建一个管道：

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
    name: 'log'
})
export class LogPipe implements PipeTransform {
    transform(value: any, args?: any): any {
        console.log(value);
        return null;
    }
}

然后你只需要在模板中写这个：

{{ variable | log }}

Answer 4

这是一个简单且有效的解决方案，如果您想在控制台中打印每个项目，而不在 .ts 文件中创建任何其他方法

1. 添加 in.ts 文件控制台

export class AppComponent  {
    console = console;
}

2. 添加.html文件c onsole.log

<li *ngFor="let item of items">
    {{ console.log('-', item) }} 
    <p>{{item.name}}</p>
</li>