html - 在 html 元素上只允许点击事件一次

Question

我在我的应用程序中使用了下面的代码。我的问题是我在每个表格的列标题中都包含了下面的代码。因此，每当我点击 mat-select 时，都会形成一个新的 currentddvalues 并将在 mat-option 的 *ngFor 循环中使用。

问题是每当我单击一个列标题时，数据将加载到所有列垫选择选项，因此我无法在单击另一个垫选择后保留用户选择。

任何一次都可以帮助如何在 mat-select 上限制此 ngFor 一次或任何其他建议以在单击其他 mat-select 后保留用户选择。

                                            <mat-form-field >
                                              <mat-select  placeholder="Banks" #{{headerName}} (click)=getColumnData(i) multiple>
                                                <!-- <mat-select-search [formControl]="bankMultiFilterCtrl"></mat-select-search> -->
                                               <mat-option #{{headerName}}. (onSelectionChange)="sorton(-1, -1)" id="clearopt">Clear filter</mat-option>
                                                <mat-option *ngFor="let record of currentddvalues " (onSelectionChange)="sorton(i, record)" id={{record}} >
                                                  {{record}}
                                                </mat-option>

                                              </mat-select>
                                            </mat-form-field>

Answer 1

像这样尝试:

Working Demo

.ts

isClicked:boolean = false

getColumnData(i){
    this.isClicked = true
}

.html

 <mat-select  placeholder="Banks" #{{headerName}} (click)="!isClicked ? getColumnData(): false" multiple>
 </mat-select>