Angular2でng2-bootstrapモーダルをインポートする

Question

私はng2-bootstrapのモーダルを使用しようとしています。

import { ModalModule } from 'ng2-bootstrap/ng2-bootstrap'; 

@NgModule({ 
    bootstrap: [ AppComponent ], 
    declarations: [ 
     AppComponent, 
     ... 
    ], 
    imports: [ 
     BrowserModule, 
     FormsModule, 
     HttpModule, 
     RouterModule.forRoot(ROUTES), 
     ModalModule 
    ], 
    providers: [ ] 
}) 

私はまだ、次のエラーを取得していますが：

Cannot read property 'show' of undefined

コンポーネント：

import { ViewContainerRef } from '@angular/core'; 

@Component({ 
    selector: 'any-comp', 
    encapsulation: ViewEncapsulation.None, 
    templateUrl: './any-comp.component.html' 
}) 
export class AnyCompComponent implements OnInit { 

private viewContainerRef: ViewContainerRef; 

constructor(
    private pageContentService: PageContentService, 
    viewContainerRef: ViewContainerRef) { 
    this.viewContainerRef = viewContainerRef; 
} 

テンプレート：だから私はすべてが下記のように例に等しく設定され

<button class="btn btn-primary" (click)="lgModal.show()">Large modal</button> 

<div bsModal="bsmodal" #lgmodal="bs-modal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true" class="modal fade"> 
    <div class="modal-dialog modal-lg"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <button type="button" (click)="lgModal.hide()" aria-label="Close" class="close"><span aria-hidden="true">×</span></button> 
     <h4 class="modal-title">Large modal</h4> 
     </div> 
     <div class="modal-body">...</div> 
    </div> 
    </div> 
</div> 

どうすればこの問題を解決できますか？

Answer 1

テンプレート変数は大文字と小文字を区別します。#lgmodal（小文字の「m」）で、lgModal（大文字の「M」）を表示しようとしています：(click)="lgModal.show()"テンプレート変数を(click)イベントの#lgModalに一致するように変更してください。