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

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

{{ variable | log }}

然后，您只需要在模板中编写此内容：

new AppHibernateUtil()

angular 2模板使用console.log

3 个答案: