angular - 在 mat-select Angular 中设置文本

Question

我有一个像这样的 mat-select 字段:

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

当我尝试访问该值时，我得到了商店标题，这很好，但在下拉列表中它还显示了代码中写入的跨度。如何隐藏选择框中的跨度文本？

Answer 1

从您的问题来看，这不是很清楚，但从您的评论来看，您似乎正在寻找的是在 mat-option 中设置可用的 span 标签> 但一旦选择它就不应该出现。您要找的是MatSelectTrigger 。根据文档

MatSelectTrigger allows the user to customize the trigger that is displayed when the select has a value.

因此您需要做的就是在 mat-select-trigger 中显示 formControl 值

<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}} <!-- where form is the name of your FormGroup -->
        </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>