代码之家 › 专栏 › 技术社区 › Prashant Pimpale Dila Gurung

如何获取角材质中MatSelect元素(Multiselect)的当前状态

angular-material-5 material-design angular

1

Prashant Pimpale Dila Gurung · 技术社区 · 7 年前

我使用的是带有多选选项的MatSelect。在每个元素检查或取消检查时,都有一个typescript函数,每次都会调用它,所以问题是,我无法区分哪个点击事件是从UI中填充的,例如Apple checked,然后调用API,如果Apple unchecked,则什么都不做

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

上述方法是正确的还是错误的?如果正确的话,那么如何让选中/未选中的事件或标志基于值调用API

1 回复 | 直到 7 年前

1

0

Sanoj_V 7 年前

试试这个,您不需要将选项值传递给函数: 在您的打字脚本中,如下所示:

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

希望这对你有帮助!