ngAfterViewInitの変数を代入するTypescriptが機能しない

Question

私はアンギュラ4にコンポーネントを作成しようとしていますが、私は解決できないような非常に奇妙な問題にぶち当たっています。

私はシンプルなboolean iは、コンポーネントの@Input

@Input('type') inputType: string = 'text'; 
showTextInput: boolean = false; 
... 
ngAfterViewInit() { 
    console.log('input', this.inputType); 
    this.showTextInput = this.inputType === 'text' ? true : false; 
    console.log('after condition', this.showTextInput); 
} 

このHTMLに基づいて設定しようとしている必要があり、その現在の形にそれがべきデフォルトでそう

<ts-input-item formControlName="name" 
       [control]="programForm.controls.name" 
       [label]="'Name'" 
       (onUpdateClicked)="updateItem($event,'Name','name')"> 
</ts-input-item> 

ですtextと入力してください。これはまあまあですが、私は非常に混乱しています。以下はconsole.logプリントです。

だから今this.showTextInputはtrueに等しいです。しかし、私はそれのようなコンポーネントでこれを使用してください

その後、コンポーネントが完全に壊れます。主に、それは私も

<div *ngIf="showTextInput"> foobar </div> 

のようなものを追加した場合foobarテキストは表示されませんし、エラーがない、親コンポーネントが渡されているフォーム名を処理しないと表示されませんが、単純にそれを置くことを理由。正しいライフサイクルフックでパスを処理していますか？

Answer 1

呼び出し変化検出は、明示的に役立つかもしれない：

constructor(private cdRef:ChangeDetectorRef) {} 

ngAfterViewInit() { 
    console.log('input', this.inputType); 
    this.showTextInput = this.inputType === 'text' ? true : false; 
    console.log('after condition', this.showTextInput); 
    this.cdRef.detectChanges(); 
}