单击按钮时未显示弹出窗口

Question

我在我的 Angular Web 应用程序中使用 devextreme 组件。现在，如果用户单击工具栏按钮，我正在尝试显示一个弹出窗口。我将弹出可见性绑定到组件中的布尔属性。问题是，弹出窗口没有显示。出于测试目的，我在组件的单​​击事件中添加了一条简单的警报消息，并且该消息正在显示。这意味着，点击事件正在调用，但popul不会显示。

这里是工具栏模板：

<dx-toolbar>
  <dxi-item location="before" widget="dxButton"
            [options]="{text: 'Új partner', type: 'default', stylingMode: 'contained', icon: 'fas fa-plus', onClick: add_onClick}"
            >
  </dxi-item>
  <dxi-item location="center" text="Partnerek"></dxi-item>
</dx-toolbar>

弹出模板：

<dx-popup
          id="entity-popup"
          [width]="400"
          height="auto"
          [showTitle]="true"
          title="Partner"
          [(visible)]="entityPopupVisible"
          [dragEnabled]="false"
          [closeOnOutsideClick]="false">
</dx-popup>

这里是组件：

import { Component } from '@angular/core';
import { SenderRepository } from '../../repositories/sender.repository'
import { Sender } from '../../models/sender.model';

@Component({
  selector: "sender-table",
  templateUrl: "./senderTable.component.html"
})
export class SenderTableComponent {

  entityPopupVisible = false;

  constructor(private repo: SenderRepository) { }

  get senders(): Sender[] {
    return this.repo.senders;
  }

  public add_onClick() {
    this.entityPopupVisible = true;
    alert("onclick");
  }
}

这里出了什么问题？谢谢。

Answer 1

模板中提到的功能可能不在控制器类的范围内。您可以尝试在控制器中定义选项对象并使用弹出窗口的onInitialized 事件绑定弹出窗口打开/关闭。试试下面的

控制器

import { Component, Inject } from '@angular/core';

import { DxPopupModule, DxButtonModule } from 'devextreme-angular';
import DxPopup from 'devextreme/ui/popup';
import DxButton from 'devextreme/ui/button';

@Component({
  styleUrls: ['app.component.css'],
  selector: 'demo-app',
  templateUrl: 'app.component.html'
})
export class AppComponent {
  public popup: DxPopup;
  public toolbarOptions = {
    text: 'Új partner', 
    type: 'default', 
    stylingMode: 'contained', 
    icon: 'fas fa-plus', 
    onClick: () => { this.popup.show() }     // <-- control pop-up here
  }

  popupInitialized(ev) {
    this.popup = ev.component;
  }
}

模板

<dx-toolbar>
  <dxi-item 
    location="before" 
    widget="dxButton"
    [options]="toolbarOptions"
  >
  </dxi-item>
  <dxi-item location="center" text="Partnerek"></dxi-item>
</dx-toolbar>

<dx-popup
  id="entity-popup"
  [width]="400"
  height="auto"
  [showTitle]="true"
  title="Partner"
  [dragEnabled]="false"
  [closeOnOutsideClick]="false"
  (onInitialized)="popupInitialized($event)"
>
</dx-popup>

工作示例：Stackblitz