ngAfterViewInit에서 변수를 지정하는 Typescript가 작동하지 않습니다.

Question

4 번 구성 요소를 만들려고하는데 문제가 해결되지 않은 매우 이상한 문제가 발생했습니다.

나는 간단한 boolean 내가이 구성 요소에 대한 @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 같다. 그러나 만약 내가 그런 다음 구성 요소에서 이것을 사용하면

<ion-input #input 
      [type]="inputType" 
      [disabled]="isSelect" 
      (keyup)="itemValueChanged(input.value)" 
      (keyup.enter)="itemUpdate()" 
      *ngIf="showTextInput"> 
    </ion-input> 

그런 다음 구성 요소가 완전히 중단됩니다. 상위 구성 요소의 형식은 이름이 전달되는 처리하지 않습니다,하지만 난 심지어

<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(); 
}