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

Question

我在 angular 网络应用程序中使用 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

模板中提到的函数可能不适用于控制器 class。您可以尝试在控制器中定义选项对象，并使用弹出窗口的 onInitialized 事件绑定弹出窗口 open/close。尝试以下

控制器

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

Answer 2

在你的组件构造器上添加这一行。

this.add_onClick = this.add_onClick.bind(this);

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

popup is not showing on button click

devextreme

angular

devextreme-angular