我试图通过单击mat-select multiple中的按钮来实现,一个选项应该取消选中,并且也应该从选中的列表中删除 .
为了删除所选的选项,我编写了如下代码:
mat-select选项:
<mat-form-field class="full-width">
<mat-select class="multiple-location-list-search-wrapper full-width" #mulLoc required placeholder="Locations" multiple>
<mat-option *ngFor="let l of locationsBasedOnPropertyType; let i = index" class="multiple-field-box" [hidden]="tempLocations[i]"
[value]="l">
{{ l.value }}
</mat-option>
</mat-select>
</mat-form-field>
删除按钮:
<span (click)="deleteLocation(i, mulLoc);">Delete Location</span>
<p>
<strong>{{mulLoc.value[i].value}}</strong>
</p>
删除功能:
deleteLocation(index, multipleLocation){
multipleLocation.selected[index]._selected = false;
multipleLocation.selected[index]._active = false;
multipleLocation.selected.splice(index,1);
multipleLocation.value.splice(index,1);
}
通过上面的实现,我可以删除 selected
& value
数组中的选项,但它没有反映在Material UI中 . 位置选项未取消选中 .
是否有任何Hack或内部方法来做同样的事情?
提前致谢!
2 回答
@Will Howel,谢谢你的帮助 .
但我得到了我的解决方案如下:
我做了一些研究
'..app-folder../node_modules/@angular/material/select/typings/select.d.ts'
我发现
writeValue(value: any): void;
我在观点中所做的更改:
对象:
组件:这是我要求删除(取消选择)位置的功能
希望能帮助到你!快乐的编码!
我担心我不完全理解删除选项的方式和时间,但这里有一个似乎可以满足您需求的示例
WORKING EXAMPLE
编辑:这是一个example,其中没有删除选项,只是取消选择 .