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

WORKING DEMO

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