Question

我最近将ng2-semantic-ui包添加到我的项目中。

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

如果我尝试通过在从ajax promise接收数据后添加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">

Angular4：ChangeDetectorRef.detectChanges使ng2-semantic-ui模态不起作用

1 个答案: