【Angular】弹框

痛定思痛。 2022-05-07 23:36 330阅读 0赞

一、Module中操作：

import {DialogModule} from 'primeng/primeng';
    import {ButtonModule} from 'primeng/primeng';

在@NgModule中import：

DialogModule,

ButtonModule

二、Component中操作：

Html：其中display和message的值在ts中赋予

<p-dialog header="提示" [(visible)]="display" modal="modal" width="400" [responsive]="true">
        <p style="text-align:center">{
       {message}}</p>
        <p-footer>
          <button type="button" pButton  (click)="display=false" label="确定"></button>
      </p-footer>
    </p-dialog>

ts：

在类中定义display和message：

message="";
    display=false; 刚开始赋值为false，让弹框不显示。

/**
     * 获取表格中的数据
     */
      getdata(){
        this.ds.getPostData(this.url,this.assemadivce).then(
          res=>{
              if(res.code=="0000"){
                  this.data=res.data.list;
                  this.total=res.data.total;
              }else{
               //这里控制表格，message是弹框的信息，display是布尔值，控制弹框的现实。
               this.message="亲，不好意思，查询失败！";
                this.display=true;
              }
          }
        )
      }

三、效果：

![70][]

[70]: /images/20220508/fee45121c78645c5830a6000ce0a3deb.png

发表评论取消回复

表情：

评论列表（有 0 条评论，330人围观）

还没有评论，来说两句吧...

相关阅读

相关 Angular material 之 dialog 弹框实战

[20190909151056434.png][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6...

朱雀/ 2024年04月18日 16:18/ 0 赞/ 73 阅读

相关 Angular6 弹出模态框 ngx-bootstrap

首先下载ngx-bootstrap npm install ngx-bootstrap --save 然后如果需要加载 bootstrap 样式，还需要下载 bootstr

淡淡的烟草味﹌/ 2023年06月22日 05:28/ 0 赞/ 19 阅读

相关删除弹框

if (selectedRowsState && selectedRowsState.length > 0) { confirm({

╰+攻爆jí腚メ/ 2022年12月23日 00:35/ 0 赞/ 194 阅读

相关 layui 弹框

信息框(msg、alert、open、confirm) icon:0 ![97c281a75adf80a3f6b2f8efd4a0abc7.png][] icon:1

旧城等待，/ 2022年09月10日 14:23/ 0 赞/ 209 阅读

相关 Angular——提示框

今天做了一下提示框，也是模仿的，所以下面我就来简单解释一下如何制作提示框，以及解析一下代码和逻辑。其实整个逻辑思路很简单，就是先在前台用HTML的p-dialog

比眉伴天荒/ 2022年05月26日 13:26/ 0 赞/ 411 阅读

相关 Angular——级联框

近期接触的新页面需要做级联框查询，用Angular做还是第一次，对我来说好像是有点难度的，难到我的是当级联框第一个框选择一个值之后后边的框不仅要把相应的值都查回来放在下拉框

曾经终败给现在/ 2022年05月24日 06:12/ 0 赞/ 451 阅读

相关【Angular】弹框

一、Module中操作： import {DialogModule} from 'primeng/primeng'; import {ButtonModule

痛定思痛。/ 2022年05月07日 23:36/ 0 赞/ 331 阅读

相关 JavaScript弹框

注意：弹窗使用反斜杠来换行![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG

系统管理员/ 2022年04月12日 05:40/ 0 赞/ 337 阅读

相关 js弹框

1.引入jquery.min.js 2.上代码 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml">

雨点打透心脏的1/2处/ 2022年03月22日 03:09/ 0 赞/ 526 阅读

相关 angular新建弹出框设置为初始值

angular做新建的弹框时，新建页面输入框的值设置为初始值，如果输入值，再次打开，把输入的值清除方法1：直接打开弹出框，没有调用方法，在ng-click设置变为为空：

爱被打了一巴掌/ 2022年02月03日 11:07/ 0 赞/ 235 阅读