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

Question

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

问题是，当我单击一个列标题时，数据将加载到所有列 mat-select 选项，因此，一旦单击另一个 mat-select，我就无法保留用户选择。

任何一次都可以帮助如何在 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>