ngAfterViewInit中的打字稿分配变量不起作用

Question

我正在尝试在 Angular 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();
}