我试图通过点击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
&amp;删除选项value
数组,但它没有在Material UI中反映出来。位置选项未取消选中。
有没有Hack或内部方法来做同样的事情?
提前致谢!
答案 0 :(得分:3)
@Will Howel,谢谢你的帮助。
但我得到了我的解决方案如下:
我做了一些研究
'..app-folder../node_modules/@angular/material/select/typings/select.d.ts'
我找到了
writeValue(value: any): void;
我在观点中所做的更改:
<mat-select class="full-width" #mulLoc required placeholder="Locations" multiple [(ngModel)]="resLoc" name="resLoc">
<mat-option *ngFor="let l of locations; let i = index [hidden]="tempLocations[i]" [value]="l">
{{ l.value }}
</mat-option>
</mat-select>
对象:
locations = [
{id : 'IND',value : 'india'},
{id : 'INS',value : 'indonesia'},
{id : 'THL',value : 'thailand'}
]
resLoc = [locations[0], locations[2]]
组件:这是我要求删除(取消选择)位置的功能
deleteLocation(i,mulLoc) {
this.resLoc.splice(i,1); // my ngModel
mulLoc.writeValue(this.resLoc); // reference variable of mat-select
}
希望它有所帮助!快乐的编码!
答案 1 :(得分:0)
我担心我不完全理解删除选项的方式和时间,但这里有一个似乎可以满足您需求的示例
toppings = new FormControl();
toppingList = ['Extra cheese', 'Mushroom', 'Onion', 'Pepperoni', 'Sausage', 'Tomato'];
remove(topping: string) {
// Remove from form control value
const selectedIndex = this.toppings.value && this.toppings.value.indexOf(topping)
if (selectedIndex > -1) {
const newToppingsValue = this.toppings.value.slice();
newToppingsValue.splice(selectedIndex, 1);
this.toppings.setValue(newToppingsValue);
}
// Remove from topping list
const listIndex = this.toppingList.indexOf(topping);
if (listIndex > -1) {
this.toppingList.splice(listIndex, 1);
}
}
编辑:这是example,其中未删除该选项,只是取消选中。