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正确？如果是这样的话，返回是一个可观察的。你必须订阅它！

尝试添加异步管在您的模板：

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