Angular 引导3上的角度2双向绑定失败显示.bs.tab事件

在show.bs.tab事件（bootstrap 3事件）中发生更改时，角度2/4双向绑定失败

我是新来的角2/4。是虫子吗

//我们的根应用程序组件
从“@angular/core”导入{Component，NgModule，VERSION，AfterViewInit}
从“@angular/platform browser”导入{BrowserModule}
@组成部分({
选择器：“我的应用程序”，
模板：`
你好{{name}


h1

氢




h3

h4




`,
})
导出类应用程序{
名称：字符串；
构造函数（）{
this.name=`Angular！v${VERSION.full}`
}
ngAfterViewInit（）{
$（'a.chart-ind'）。在（'click'，this.tabChange.bind（this））；
$（'a.chart-ind1'）。on（'show.bs.tab'，this.tabChange.bind（this））；
}
tabChange（e）：无效{
$（'#prevname'）.text（this.name）；
this.name=$（e.target）.text（）；
$（'#aftername'）.text（this.name）；
}
}
@NGD模块({
导入：[BrowserModule]，
声明：[App]，
引导：[应用程序]
})
导出类AppModule{}

（所有选项卡共享相同的回调，h1、h2使用单击，h3、h4使用显示的.bs.tab）

//our root app component
import {Component, NgModule, VERSION, AfterViewInit} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>Hello {{name}}</h2>
    </div>
    <ul class="nav nav-tabs">
            <li role="presentation" class="active">
                <a class="chart-ind" role="tab" data-toggle="tab">h1</a></li>
            <li role="presentation">
                <a class="chart-ind" role="tab" data-toggle="tab">h2</a></li>
            <li role="presentation">
        </ul>
    <ul class="nav nav-tabs">
            <li role="presentation" class="active">
                <a class="chart-ind1" role="tab" data-toggle="tab">h3</a></li>
            <li role="presentation">
                <a class="chart-ind1" role="tab" data-toggle="tab">h4</a></li>
            <li role="presentation">
        </ul>
        <p id="prevname"></p>
        <p id="aftername"></p>
  `,
})
export class App {
  name:string;
  constructor() {
    this.name = `Angular! v${VERSION.full}`
  }
    ngAfterViewInit(){
        $('a.chart-ind').on('click', this.tabChange.bind(this));
        $('a.chart-ind1').on('shown.bs.tab',this.tabChange.bind(this));
    }
    tabChange(e) : void{
      $('#prevname').text(this.name);
      this.name = $(e.target).text();
      $('#aftername').text(this.name);

    }
}

@NgModule({
  imports: [ BrowserModule ],
  declarations: [ App ],
  bootstrap: [ App ]
})
export class AppModule {}