Question

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

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

任何一次都可以帮助限制此ngFor的选择一次，或者在单击其他选择后仍保留用户选择的任何其他建议。

                                            <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>

在HTML元素上仅允许一次单击事件

1 个答案: