Décochez dynamiquement plusieurs options de sélection dans md-select angular 4.x

Question

J'essaye d'implémenter le clic d'un bouton dans le multi-select multiple, une option devrait être décochée et devrait être enlevée de la liste vérifiée aussi.

pour enlever l'option sélectionnée, j'ai écrit mon code comme ci-dessous:

tapis de sélection Option:

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

bouton Supprimer:

<span (click)="deleteLocation(i, mulLoc);">Delete Location</span> 
      <p> 
      <strong>{{mulLoc.value[i].value}}</strong> 
      </p> 

fonction Supprimer:

deleteLocation(index, multipleLocation){ 
    multipleLocation.selected[index]._selected = false; 
    multipleLocation.selected[index]._active = false; 
    multipleLocation.selected.splice(index,1); 
    multipleLocation.value.splice(index,1); 
    } 

En mettant en œuvre ci-dessus, je suis en mesure de supprimer l'option de selected & value tableau mais il ne reflète pas dans l'interface utilisateur matérielle. L'option de localisation n'est pas désactivée.

Existe-t-il une méthode Hack ou interne pour faire la même chose?

Merci d'avance!

Answer 1

@Will Howel, Merci pour votre aide homme.

Mais j'ai obtenu ma solution comme ci-dessous:

J'ai fait quelques recherches dans
'..app-folder../node_modules/@angular/material/select/typings/select.d.ts'
J'ai trouvé
writeValue(value: any): void;

Les changements que j'ai fait à mon avis:

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

Objets:

locations = [ 
{id : 'IND',value : 'india'}, 
{id : 'INS',value : 'indonesia'}, 
{id : 'THL',value : 'thailand'} 
] 
resLoc = [locations[0], locations[2]] 

Component: c'est la fonction que je fais appel à la suppression (désélection) Lieu

deleteLocation(i,mulLoc) { 
    this.resLoc.splice(i,1); // my ngModel 
    mulLoc.writeValue(this.resLoc); // reference variable of mat-select 
    } 

Hope it helps! codage heureux!

Answer 2

Je crains que je ne comprends pas bien comment et quand les options sont supprimées, mais voici un exemple qui semble répondre à vos besoins

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); 
    } 

} 

WORKING EXAMPLE

---

EDIT: Voici un example où l'option n'est pas supprimée, juste désélectionnée.