【Angular】彈框

一、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;
          }
      }
    )
  }

三、效果：