*ngIf的值沒有變動,使用switch控制顯示

不知道是哪根筋打到
以前這種都可以很正常的subscribe顯示隱藏
但是這次寫卻不會連動顯示隱藏

就是訂閱piqType欄位,
偵測變動時去用值控制isShowQuestionPIQA 和 isShowQuestionPIQB
的*ngIf 顯示隱藏

請大神幫看問題,感謝

HTML

   <div
    class=""
    fxLayout="column wrap"
    fxLayoutGap="20px"
    *ngIf="isShowQuestionPIQA"
      >AAA</div>

   <div
    class=""
    fxLayout="column wrap"
    fxLayoutGap="20px"
    *ngIf="isShowQuestionPIQB"
      >BBB</div>

TS

  public isShowQuestionPIQA: boolean;
  public isShowQuestionPIQB: boolean;

ngOnInit() {
this.piqTYpeScribe = this.formDataService.serviceFormGroup.controls.bci
  .get('piqType')
  .valueChanges.pipe()
  .subscribe(x => {
    this.professionalInvestorQuestionType(x);
  });

}

 professionalInvestorQuestionType(piqType) {   
     if (piqType) {
    this.switchShowQuestion(piqType);    
 }


switchShowQuestion(piqTypeValue) {
switch (piqTypeValue) {
  case 'aA':
    this.isShowQuestionPIQA = true;
    this.isShowQuestionPIQB = false;

    break;

  case 'aB':
    this.isShowQuestionPIQB = true;
    this.isShowQuestionPIQA = false;
  
    break;

  default:      

    break;
    }   
 }

找到原因了…

@Component({
changeDetection: ChangeDetectionStrategy.OnPush,
}),

把這個刪除即可

不確定建議的好不好(如有問題請鞭策)

既然有用了ChangeDetector
建議重新檢視一下當初為什麼要用ChangeDetector

如果仍有需要請使用markForCheck 去做更新頁面的動作

FYI
[Angular 大師之路] Day 26 - 認識元件的變更偵測策略

1個讚