【Angular】弹框

痛定思痛。 2022-05-07 23:36 261阅读 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 条评论，261人围观）

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

相关阅读

相关 Angular material 之 dialog 弹框实战

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

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

相关 java工作复习——JavaScript的3个弹框对比总结——JavaScript的Alert弹框——confirm弹框 ——prompt弹框...

引入包：import org.openqa.selenium.Alert; js的alert弹框 Alert alert = driver.switchTo().al

冷不防/ 2023年10月03日 17:03/ 0 赞/ 13 阅读

相关删除弹框

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

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

相关 layui 弹框

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

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

相关 Angular——提示框

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

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

相关 Angular——级联框

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

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

相关【Angular】弹框

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

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

相关 JavaScript弹框

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

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

相关 js弹框

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

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

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

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

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