angular前端点击按钮弹出输入框

这个功能主要要三块来实现

首先点击html 文件里的 button之后，要跳到函数里面（在component文件里面 ），然后那个函数 要把html的<p-dialog> 显示出来

/ / xxxx.component.html

      <div class="row">
        <div class="col-lg-12">
          <p-dataTable [value]="dataObj.data" dataKey="partCode" [resizableColumns]="true" [rowHover]="true">
            <p-column  header="操作"  >
              <ng-template
               let-rule="rowData" pTemplate="body">
              <button
               class="btn btn-block xxx-btn-subject btn-sm" [disabled]="rule.ruleStatus ==2" type="button"
                        (click)="fail(rule.id)">失效
                </button>
            <p-column field="callDate" header="操作" [style]="{'width':'100px','text-align':'center'}">
              <ng-template let-col let-rule="rowData" pTemplate="body">
                <button class="btn btn-block xxx-btn-subject btn-sm"  [disabled]=" !(rule.transType ==1 && rule.giveBackFlag ==0) " type="button" (click)="refund()"  >退返</button>
              </ng-template>
            </p-column>

  </div>
</div>

<p-dialog header="退款说明" [(visible)]="displayRefund"[width]="400" [height]="250" [responsive]="true" [modal]="true" >
                  <textarea  class="form-control sm-height" rows="6" cols="20" name="inputReason" placeholder="请输入退款原因" type="text"
                             [(ngModel)]="bonusQueryVo.queryTerms.inputReason">
                  </textarea>
  <p-footer>
    <div class="btn-group btn-group-pull-right">
      <button class="btn btn-block xxx-btn-subject btn-sm" type="button" pButton icon="pi pi-check" (click)= "confirmRefund()" label="确认"></button>
    </div>
    <div class="btn-group btn-group-pull-left">
      <button class="btn btn-block xxx-btn-subject btn-sm" type="button" pButton icon="pi pi-times" (click)="displayRefund=false "  label="取消"></button>
    </div>
  </p-footer>
</p-dialog>

// xxxx.component.ts
  displayRefund: boolean = false;  // 退款说明输入框

  constructor(private bonusListService: BonusListService, private alertService: AlertService, private fileService: FileService
    , private cacheService: CacheService, private accountService: AccountService) { }
   * @param transferNo
   */
  back = (transferNo : number) => {
    this.alertService.warning({
      message: "是否确认退款?", acceptF: () => {
        console.log("yes");
        this.bonusListService.exportBonus(this.bonusQueryVo.queryTerms, RoleConstants.xxx).subscribe(res => {
          if (res.status == 1) {
            if (res.data && res.data.url) {
              this.fileService.downloadFile(res.data.url);
            } else {
              // this.alertService.error("错误", "下载错误");
              this.dolDialog.show('下载错误', '提示', false);
            }
          } else {
            // this.alertService.error("错误", res.errMsg);
            this.dolDialog.show(res.errMsg, '提示', false);
          }
        });
      }, cancelF: () => {
      }
    });
  };

  /**
   * 退款
   */
  refund() {
    this.displayRefund=true;
  };

  confirmRefund() {
    this.displayRefund=false;
    this.searchList();
  };
}

service.ts

  /**
  *退款
   */
  refund(bonusQueryVo: BonusQueryVo, role: string): Observable<any> {
    switch (role) {
      case RoleConstants.xx:
        this.url = AppUrls.BONUS.BONUS_LIST_xxx;
        break;
      case RoleConstants.DEALER:
        this.url = AppUrls.BONUS.BONUS_LIST_DEALER;
        break;
    }
    return this.restService.commonAjax(this.url, bonusQueryVo).map((res: any) => {
      return res;
    }).catch((error: any) => Observable.throw(error || 'Server Error'));
  };

// xxxx.vo.ts

  createDateStart: string;    // 开始时间
  createDateEnd: string;      // 结束时间
  status: number;           // 转账状态
  inputReason:string; // 退款原因（用于退款）
}

export class BonusQueryVo extends TableVo {