angular - ngAfterViewInit 中的 typescript 分配变量不起作用

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 文本不会显示，也没有错误。我是否在正确的生命周期 Hook 中处理传递？

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