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 }}