Javascript 角度尝试显示对象HTMLInputElement

我正在尝试学习Angular2（我知道它是Alpha，但最好是学习新东西），并尝试制作一个加载模板的非常基本的组件

我的组件如下所示：

var AppComponent = ng.Component({
        selector: 'my-app',
        templateUrl: 'mytemplate.html'

    })
        .Class({

            constructor: function () {
                console.log('my-app loaded...');
                this.firstname = "Craig";
            },

            writeLog() {
                alert(this.firstname);
            }
        });

<div>
    <h1>Hello there, {{firstname}}</h1>
    <button (click)="writeLog()">Click me</button>  
</div>

当我的模板代码在组件中倾斜时，我得到了预期的结果。我现在尝试为html使用一个单独的html文件

我的html文件如下所示：

var AppComponent = ng.Component({
        selector: 'my-app',
        templateUrl: 'mytemplate.html'

    })
        .Class({

            constructor: function () {
                console.log('my-app loaded...');
                this.firstname = "Craig";
            },

            writeLog() {
                alert(this.firstname);
            }
        });

<div>
    <h1>Hello there, {{firstname}}</h1>
    <button (click)="writeLog()">Click me</button>  
</div>

你好，{{firstname}}
点击我

屏幕会加载，但会显示：

您好，[object HTMLInputElement]

但是，我点击按钮，它从组件（Craig）中获得正确的值

---

为什么html没有呈现{{first name}}属性，而按钮（警报方法，在组件中，所以可能是隐私问题）是？我想我需要让“名字”更公开一些还是什么？

你确定你所有的代码都是这样吗？打印出来真的很奇怪是的，这是完整HTML的复制和粘贴。它是从我的main index.html加载到一个东西中的（对不起，我还不知道正确的术语）。