动态取消选中 md-select angular 4.x 中的多个 select 选项
Dynamically uncheck multiple select options in md-select angular 4.x
我正在尝试通过点击 mat-select 中的一个按钮实现多个,一个选项应该被取消选中并且也应该从选中列表中删除。
为了删除 selected 选项,我编写了如下代码:
垫-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 或内部方法可以做到这一点?
提前致谢!
恐怕我不完全理解删除选项的方式和时间,但这里有一个例子似乎可以满足您的需要
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 选项没有被删除,只是被取消选择。
@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
}
希望对您有所帮助!编码愉快!
我正在尝试通过点击 mat-select 中的一个按钮实现多个,一个选项应该被取消选中并且也应该从选中列表中删除。
为了删除 selected 选项,我编写了如下代码:
垫-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 或内部方法可以做到这一点?
提前致谢!
恐怕我不完全理解删除选项的方式和时间,但这里有一个例子似乎可以满足您的需要
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 选项没有被删除,只是被取消选择。
@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
}
希望对您有所帮助!编码愉快!