Question

我正在使用带有多选选项的MatSelect。在每个元素上检查或取消选中都有一个打字稿函数，每次都会调用，所以问题是，我无法区分哪个点击事件是从UI填充的。 Apple检查然后调用API，如果Apple取消选中，则不执行任何操作

.html文件

 <mat-form-field>
    <mat-select [(value)]="selected" formControlName="tagList" id="tagList" placeholder="Select Tag" name="tagList" multiple>
      <mat-option *ngFor="let tag of tagList" [value]="tag" 
         (click)="isSelectedTagIsCallback(tag, $event.value)">
         {{tag.name}}
      </mat-option>
    </mat-select>
 </mat-form-field>

.ts文件

isSelectedTagIsCallback(data, event) {
      if(checked){
         // Call API
      }
     else{
       // Do nothing
     }
}

以上方法是错还是对？如果正确，那么如何获得checked / Unchecked事件或标记以基于值

调用API

Answer 1

试试这个，你不需要将选项值传递给函数：在这样的打字稿中：

selected: any = '';
isSelectedTagIsCallback() {
    if(this.selected!=''){
       alert(this.selected); //CALL API Here
    }else{
       // Do nothing
}

在您发布的html中，将isSelectedTagIsCallback(tag, $event.value)替换为isSelectedTagIsCallback()在功能中，您可以获得以逗号分隔的多个复选框值。

这是工作示例：angular-multiple-value-selected-in-material

希望这会对你有帮助！

如何在角度材料中获取MatSelect元素（Multiselect）的当前状态

1 个答案: