Angular4：ChangeDetectorRef.detectChangesはng2-semantic-uiモーダルが機能しないようにします

Question

最近私のプロジェクトにng2-semantic-uiパッケージを追加しました。

ng2-semantic-ui：https://edcarroll.github.io/ng2-semantic-ui/#/getting-started

私はアヤックスの約束からデータを受信した後this.changeDetectorRef.detectChanges();を追加することによって、ビューを変更するには、角度を強制しようとした場合、モーダルを開くと表示されません。ここで

コードスライスです：

myComponent.ts：

import { Component, OnInit, ViewChild, ChangeDetectorRef, ChangeDetectionStrategy } from '@angular/core'; 
import { service} from './service'; 
import { SuiModalService, TemplateModalConfig, ModalTemplate } from 'ng2-semantic-ui'; 

export interface IContext { 
    data:string; 
} 

@Component({ 
    ... 
}) 
export class myComponentimplements OnInit { 

    @ViewChild('modalTemplate') 
    public modalTemplate:ModalTemplate<IContext, string, string>; 

    theResult : any; 
    data : any; 

    constructor(private service: service, 
       private changeDetectorRef : ChangeDetectorRef, 
       public modalService:SuiModalService) { 
    /* 
    // if i write code like this, modal will work. 
    this.theResult = [ 
     { id: "1", skype: "skype1", name: "name1" }, 
     { id: "2", skype: "skype2", name: "name2" }, 
     { id: "3", skype: "skype3", name: "name3" } 
    ]; 
    */ 

    // if i do this, modal will not work. 
    this.queryTranslatorService.searchTranslator() 
     .then((result) => { 
     console.log("query-ngOnInit, result:", result); 
     this.theResult = result; 
     this.changeDetectorRef.detectChanges(); 

     }) 
     .catch((error) => { 
     console.log("query-ngOnInit, error:", error); 
     });  

    } 

    ngOnInit() { 

    } 

    editBtnClick(tpr) { 

    this.data = tpr; 
    const config = new TemplateModalConfig<IContext, string, string>(this.modalTemplate); 

    config.closeResult = "closed!"; 
    config.context = { data: "dynamicContent" }; 

    this.modalService 
     .open(config) 
     .onApprove(result => { alert("ok"); }) 
     .onDeny(result => { alert("not ok"); }); 
    } 
} 

HTML：

<table class="ui celled table"> 
    <thead> 
    <tr> 
     <th>ID</th> 
     <th>SKYPE</th> 
     <th>NAME</th> 
     <th>Edit</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr *ngFor="let tpr of theResult"> 
     <td>{{tpr.id}}</td> 
     <td>{{tpr.skype}}</td> 
     <td>{{tpr.name}}</td> 
     <td><button class="ui button" (click)="editBtnClick(tpr)">Edit</button></td> 
    </tr> 
    </tbody> 
</table> 

<ng-template let-context let-modal="modal" #modalTemplate> 
    <div class="header">Example</div> 
    <div class="content"> 
     <table class="ui celled table"> 
      <thead> 
      <tr> 
       <th>ID</th> 
       <th>SKYPE</th> 
       <th>NAME</th> 
      </tr> 
      </thead> 
      <tbody> 
      <tr> 
       <td>{{data.id}}</td> 
       <td>{{data.skype}}</td> 
       <td>{{data.name}}</td> 
      </tr> 
      </tbody> 
     </table> 
    </div> 
    <div class="actions"> 
     <button class="ui red button" (click)="modal.deny('denied')">Cancel</button> 
     <button class="ui green button" (click)="modal.approve('approved')" autofocus>OK</button> 
    </div> 
</ng-template> 

Answer 1

要求は角/ HTTP右ですか？そうであれば、リターンはObservableです。あなたはそれを購読する必要があります！テンプレートで非同期パイプを追加する

試してみてください。

<tr *ngFor="let tpr of theResult | async">