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-select-trigger 并创建一个函数来返回您需要的值

在 ts 文件中

getOptionDisplayValue(title: string): yourInterface {
    let address;
    address = yourData.find(data => data.title=== title);   
    return address;
}

在 html 中

<mat-select-trigger>
        {{getOptionDisplayValue(Form.get('store').value).Title}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        {{getOptionDisplayValue(Form.get('store').value).Address}}   
</mat-select-trigger>

Answer 2

要在选择下拉列表中隐藏跨度文本，请将其从HTML中删除...现在将是：

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

Answer 3

您可以在下面添加它，也可以为store.tile添加span标签。

<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">
                                 <span class="store-address"> {{store?.Title}}</span>
                                  <span class="store-address">{{store?.Address}}</span>
                                </mat-option>
                              </mat-select>
                            </mat-form-field>

Answer 4

如果需要渲染跨度。您可以通过CSS隐藏它。

.store-address {
    display: none;
}

或者，如果需要使用[hidden]属性，则可以使用它。

Answer 5

根据您的问题不是很清楚，但是根据您的评论，您似乎正在寻找要在span中设置mat-option标记的情况，但是一旦选中它就不应出现。您正在寻找的是MatSelectTrigger。根据文档

MatSelectTrigger允许用户自定义当选择具有值时显示的触发器。

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

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

将文字设置为以垫选择角度

5 个答案: