小编Hum*_*olt的帖子

如何防止点击取消按钮时调用onSubmit()函数

我有一个角度材料对话框,里面有一个模板驱动形式.当我点击提交按钮时效果很好但是当我点击取消按钮时,也会调用onSubmit()函数.怎么预防?这是我的代码片段

// ts file
export class RejectPopupComponent implements OnInit {
   submitted:boolean=false;
  comment: string;
  loanID: string;
  createdDate: string;
  constructor(
    private dataService: DataService,
    public dialogRef: MatDialogRef<RejectPopupComponent>,
    @Inject(MAT_DIALOG_DATA) public data: any
  ) {
    this.dataService.loanIdSource.subscribe(loanID => (this.loanID = loanID));
    console.log(this.loanID);

    this.dataService.applicationDateSource.subscribe(
      applicationDate => (this.createdDate = applicationDate)
    );
    console.log(this.loanID, this.createdDate);
  }
 
  onNoClick(): void {
    this.dialogRef.close();
  }

     onSubmit(form:any){
      console.log('hello')
    console.log(form);
       const statusDecisionInput = { loanID: "", createdDate: "", approverAction: "Rejected", reasonToReject: '' };
   statusDecisionInput.loanID = this.loanID;
   statusDecisionInput.createdDate = this.createdDate;
   statusDecisionInput.reasonToReject = form.reasonToReject;
   console.log(statusDecisionInput);
    this.submitted=true;
  }


  ngOnInit() …
Run Code Online (Sandbox Code Playgroud)

angular-material angular

4
推荐指数
1
解决办法
2422
查看次数

如何修复 mat-tab 的标题

我有 5 个 mat-tab,每个选项卡都有大量数据,因此滚动将添加到该窗口。有什么方法可以修复 mat-tab 的标题并让内容可以滚动。

我尝试放置位置:固定;位置:粘在里面

::ng-deep .mat-tab-label {

}
Run Code Online (Sandbox Code Playgroud)

但这似乎并不能解决问题。我的html

<div class="container">

  <mat-tab-group class="demo-tab-group" (selectedIndexChange)="loadDynamicContent($event)">
    <mat-tab matTooltip="Tooltip!" label="Pers info">
      <table id="customers" *ngIf="customerData">
        <caption>
          <h4>Customer Information</h4>
        </caption>
        <tr *ngFor="let item of customerData">
          <td class="key" width="50%">
            {{item.key}}
          </td>
          <td class="value" width="50%">{{item.value}}</td>
        </tr>
      </table>
      <table id="customers" *ngIf="aadhaarAddress">
        <caption>
          <h4>Aadhaar Address</h4>
        </caption>
        <tr *ngFor="let item of aadhaarAddress">
          <td class="key" width="50%">
            {{item.key}}
          </td>
          <td class="value" width="50%">{{item.value}}</td>
        </tr>
      </table>
      <table id="customers" *ngIf="presentAddress">
        <caption>
          <h4>Present Address</h4>
        </caption>
        <tr *ngFor="let item of presentAddress">
          <td class="key" width="50%"> …
Run Code Online (Sandbox Code Playgroud)

css angular-material2 angular

4
推荐指数
2
解决办法
2万
查看次数

如何覆盖 ng2 pdf 查看器 css

我在有角度的材质对话框中渲染 pdf。我在检查时使用ng2-pdf-viewer,我看到容器宽度非常小,我想增加它。所以,我想改变

在此处输入图片说明

.ng2-pdf-viewer-container[_ngcontent-c13] {
     overflow-x: auto; 
}
Run Code Online (Sandbox Code Playgroud)

到

 .ng2-pdf-viewer-container[_ngcontent-c13] {
         width: 100%;
    }
Run Code Online (Sandbox Code Playgroud)

我试过 !important 但它不起作用

怎么做?

css angular

3
推荐指数
1
解决办法
2795
查看次数

如何在悬停时更改表格行的颜色

我试图在悬停时更改表格行的颜色.通过使用row:hover,但通过这种方式它只是悬停在一个明显的特定细胞.但是当我尝试使用时row cell: hover,它没有任何效果.这是我的HTML.

JSfiddle:https://jsfiddle.net/f4ojhxco/2/

 <div id="table">
  <div class="header-row row">
<span class="cell">SI. No.</span>
    <span class="cell">Application Date</span>
    <span class="cell">Customer Name</span>
    <span class="cell">Loan Amount</span>
    <span class="cell">Loan Status</span>
    <span class="cell">Action</span>
  </div>
<div class="row" *ngFor="let item of customerList ; let i= index;">
    <input type="radio" name="expand">
<span class="cell" data-label="SI. No.">{{i+1}}</span>
<span class="cell" data-label="Application Date">{{item.date}}</span>
<span class="cell" data-label="Customer Name">
  {{item.name}}</span>
<span class="cell" data-label="Loan Amount">{{item.amount}}</span>
<span class="cell" data-label="Loan Status">{{item.status}}</span>
<span class="cell" data-label="Action">
  <a href="https://www.w3schools.com">More Details</a>
</span>
  </div>
</div>
Run Code Online (Sandbox Code Playgroud)

css css3

1
推荐指数
1
解决办法
64
查看次数

“string[]”类型的参数不可分配给“ReadonlyArray&lt;number&gt;”类型的参数

我正在尝试从本教程中学习 d3.js我在 angular 中使用 d3.js 绘制图形,但我被困在这里。谁能告诉我如何解决这个错误。我只有一种方法drawSvg(),但出现错误 Argument of type 'string[]' is not assignable to parameter of type 'ReadonlyArray<number>'

我该如何解决这个错误?

在此处输入图片说明

d3.js typescript angular

1
推荐指数
1
解决办法
2115
查看次数