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

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

Typescript assigning variable in ngAfterViewInit not working

components

angular2-components

angular