ダイナミックに生成されたcompoentを含むdiv上のngIf

Question

実行時に生成される動的生成コンポーネントがあります。以下は、.TSは

`@ViewChild(TermsheetDirective) termHost: TermsheetDirective; 
    @Input() term; 
    @Input() title = ''; 
    @Input() Qnumber = ''; 
    @Output() result = new EventEmitter<any>(); 
    section_title = ''; 
    number = ''; 
    component = []; 
    show = false; 

    constructor(private componentFactoryResolver: ComponentFactoryResolver) { 

    } 
    ngOnInit() { 
     this.number = this.Qnumber; 
     this.section_title = this.title; 
    } 


    ngAfterViewInit() { 
    } 
    ngAfterContentInit() { 

    } 
    loadcomponents() { 
     console.log(this.termHost); 
     for (let j = 0; j < this.term.components.length; j++) { 
      let termItem = this.term.components[j]; 
      let componentFactory = this.componentFactoryResolver.resolveComponentFactory(termItem.component); 
      let viewContainerRef = this.termHost.viewContainerRef; 
      let componentRef = viewContainerRef.createComponent(componentFactory); 
      (<TermComponent>componentRef.instance).data = termItem.data; 
      this.component[j] = componentRef; 
     } 
    } 
    getdata() { 
     let output = []; 
     for (let i = 0; i < this.component.length; i++) { 
      let temp = { 
       slug : this.section_title, 
       type : this.component[i].type, 
       value : this.component[i]._component.getdata() 
      }; 
      output[i] = temp; 
     } 
     this.result.emit(output); 
     return output; 
    } 
    showcomp() { 
     console.log("In if"); 
     this.show = true; 
     this.loadcomponents(); 

    } 
    hidecomp() { 
     this.show = false; 
    }` 

を提出し、次は私のhtml

`<div class="main"> 
    <div class="div_for_ques"> 
    <div class="question"> 
     <div class="number"> 
     {{number}} 
     </div> 
     <div class="textbox"> 
     {{section_title}} 
     </div> 
     <div class="arrow" *ngIf="!show"> 
      <a (click)="showcomp()" class="glyphicon">&#xe080;</a> 
     </div> 
     <div class="arrow" *ngIf="show"> 
      <a (click)="hidecomp()" class="glyphicon">&#xe080;</a> 
     </div> 
    </div> 
    <div class="sec_two" *ngIf="show"> 
     <ng-template term-host></ng-template> 
    </div> 
    </div> 
</div>` 

である私は、特定のボタンがクリックされたときにのみ表示されるように動的に生成されたコンポーネントが含まれているのdivをしたいです。私は次のような対応をしています。

しかし、このdivをngなしで表示しようとすると、正常に動作しています。しかし、ngIfのtermHostは未定義です！誰かがここで起こっていることを説明してもらえますか？

Answer 1

変更検出サイクルが完了する前に、viewContainerRefを参照しようとしています。そのため、そのエラーが発生します。

これまでに複数のソリューションがありますが、あなたは* ngIfが真

例えば

@ViewChild('') set content(x:x) { 
this.x = x; 

}

になった後に一度呼び出されます ViewChild、用セッターを使用することができます

または手動で変更検出器を注入することができます。

constructor(private changeDetector : ChangeDetectorRef) {} 

あなたはボタン

this.changeDetector.detectChanges(); 

ORまた、あなたは変化に

を購読することができますので、同じ効果を達成するためにQueryListを使用することができますをクリックした後、あなたは、これらを適用してください、それを呼び出すことができますあなたの問題を解決するためのあなたのロジックへのテクニック