Angular4:ChangeDetectorRef.detectChanges使ng2语义ui模式无法工作

我最近在我的项目中添加了

ng2语义ui

包

ng2语义用户界面

：

如果我试图通过添加

this.changedethetectorref.detectChanges（）来强制angular更改视图从ajax promise接收数据后，模式将不会打开并显示

以下是代码片段：

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

从'@angular/core'导入{Component，OnInit，ViewChild，ChangeDetectorRef，ChangeDetectionStrategy}；
从“./service”导入{service}；
从“ng2语义ui”导入{SuiModalService，TemplateModalConfig，ModalTemplate}；
导出接口IContext{
数据：字符串；
}
@组成部分({
...
})
将类myComponentimplements导出到NIT{
@ViewChild（'modalTemplate'）
公共modalTemplate：modalTemplate；
结果：有；
资料：有；
建造商（私人服务：服务、，
私有changeDetectorRef:changeDetectorRef，
公共modalService:SuiModalService{
/*
//如果我写这样的代码，modal就可以工作了。
this.theResult=[
{id:“1”，skype:“skype1”，name:“name1”}，
{id:“2”，skype:“skype2”，name:“name2”}，
{id:“3”，skype:“skype3”，name:“name3”}
];
*/
//如果我这样做，模态将无法工作。
this.queryTranslatorService.searchTranslator（）
。然后（（结果）=>{
log（“查询ngOnInit，结果：”，结果）；
this.theResult=结果；
this.changeDetectorRef.detectChanges（）；
})
.catch（（错误）=>{
log（“查询ngOnInit，错误：”，错误）；
});    
}
恩戈尼尼特（）{
}
编辑按钮（tpr）{
这个数据=tpr；
const config=new TemplateModalConfig（this.modalTemplate）；
config.closeResult=“closed！”；
config.context={data:“dynamicContent”}；
这是modalService
.open（配置）
.onApprove（结果=>{alert（“ok”）；}）
.onDeny（结果=>{alert（“notok”）；}）；
}
}

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>


身份证件
SKYPE
名称
编辑
{{tpr.id}
{{tpr.skype}
{{tpr.name}
编辑
例子
身份证件
SKYPE
名称
{{data.id}
{{data.skype}
{{data.name}
取消
好啊
请求是角度/http>对吗？如果是这样的话，回报是可以观察到的。你必须订阅它

尝试在模板中添加异步管道：

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

为什么要调用
检测更改
？