0
votes

Définition de texte dans la touche-sélection angulaire

J'ai un champ code> Mat-Select code> tel que ceci:

<mat-form-field>
    <mat-select (click)="onSelectOpen()" placeholder="Store" (selectionChange)="setStoreTitle($event)" title="Store" formControlName="store" id="store" name="store">
        <mat-option *ngFor="let store of stores" [value]="store.Title">
            {{store.Title}}
            <span class="store-address">{{store.Address}}</span>
        </mat-option>
    </mat-select>
</mat-form-field>

angular angular-material

0 commentaires

5 Réponses :

0
votes

Pour masquer le texte de la plage dans la liste déroulante Sélectionner, supprimez-le de votre HTML ... qui serait maintenant:

                  <mat-select (click)="onSelectOpen()" placeholder="Store" (selectionChange)="setStoreTitle($event)"
                             title="Store"
                             formControlName="store" id="store" name="store">
                    <mat-option *ngFor="let store of stores" [value]="store.Title">
                      {{store.Title}}
                    </mat-option>
                  </mat-select>

3 commentaires

Je ne peux pas faire ça. Je dois montrer la Span aussi. Sinon, il est bien compris que la suppression de l'étiquette de l'espace le ferait.

@Binayakshankar, "Je dois montrer la Span aussi" (selon votre commentaire) et vous avez demandé "Comment cacher ce texte Texte dans Select Box? (Dans la question) ... Lequel est-ce?"

Je dois montrer la balise de l'espace lorsque les options apparaissent. Lorsque je sélectionne une option, le texte de la portée ne doit pas être là lorsque je sélectionne une option.

0
votes

Vous pouvez l'ajouter comme ceci ci-dessous, ajouter une balise de span pour le magasin.tile également. xxx

0 commentaires

0
votes

Si vous avez besoin de la portée pour être rendu. Vous pouvez le masquer via CSS.

.store-address {
    display: none;
}

0 commentaires

1
votes

Ce n'est pas très clair de votre question, mais de vos commentaires, il ressemble à ce que vous recherchez est de définir la balise CODE> SPAN CODE> disponible dans l'option MAT-OPTION CODE > Mais cela ne devrait pas apparaître une fois sélectionné. Ce que vous cherchez est MATSELLECTRIGHIGHIGHT . Selon les docs

MSelectTrigger permet à l'utilisateur de personnaliser la gâchette affichée lorsque la sélection a une valeur. P> blockQuote> Donc, tout ce que vous avez à faire est d'afficher la valeur FormControl code> dans Mat-Select-Trigger CODE> P> <mat-form-field> <mat-select (click)="onSelectOpen()" placeholder="Store" (selectionChange)="setStoreTitle($event)" title="Store" formControlName="store" id="store" name="store"> <mat-select-trigger> {{form.get('store').value}}  </mat-select-trigger> <mat-option *ngFor="let store of stores" [value]="store.Title"> {{store.Title}} <span class="store-address">{{store.Address}}</span> </mat-option> </mat-select> </mat-form-field>

0 commentaires

1
votes

Vous pouvez essayer d'utiliser la touche-sélection-déclencheuse et créer une fonction pour renvoyer la valeur dont vous avez besoin

dans le fichier TS xxx

dans html xxx

0 commentaires