mat-select 不显示，直到我点击它 [英] mat-select doesn't display until i click on it

问题描述

mat-select 不显示，直到我点击它，也不显示值.

mat-select doesn't display until i click on it, also does not display the value.

HTML

<mat-form-field class="select" appearance="fill">
  <mat-label>Flex property</mat-label>
  <mat-select placeholder="Choose property" [(ngModel)]="selectedItem">
    <mat-option *ngFor="let prop of flexProperties" [value]="prop.value">
      {{prop.viewValue}}
    </mat-option>
  </mat-select>
</mat-form-field>

TS

  selectedItem: string;



 flexProperties: flexProps[] = [
    {value: 'flexDirection', viewValue: 'flex-direction'},
    {value: 'justifyContent', viewValue: 'justify-content'},
    {value: 'flexWrap[enter image description here][1]', viewValue: 'flex-wrap'},
    {value: 'flexFlow', viewValue: 'flex-flow'},
    {value: 'order', viewValue: 'order'},
    {value: 'alignItems', viewValue: 'align-items'},
    {value: 'alignSelf', viewValue: 'align-self'},
    {value: 'alignContent', viewValue: 'align-content'},
    {value: 'flexGrow', viewValue: 'flex-grow'},
    {value: 'flexShrink', viewValue: 'flex-shrink'},
    {value: 'flexBasic', viewValue: 'flex-basic'}
  ]

这在选择选项后如何选择[1]:https://i.stack.imgur.com/K8Yt1.png

This how select looks after selected option [1]: https://i.stack.imgur.com/K8Yt1.png

推荐答案

如果你只是想在你的 mat-select 中显示一些消息，你可以这样做:

If you just want to show some message in your mat-select, you can do it:

<mat-form-field class="select" appearance="fill">
  <mat-label>Flex property</mat-label>
  <mat-select placeholder="Choose property" [(ngModel)]="selectedItem">
    <mat-option>Choose property</mat-option>
    <mat-option *ngFor="let prop of flexProperties" [value]="prop.value">
      {{prop.viewValue}}
    </mat-option>
  </mat-select>
</mat-form-field>

这篇关于mat-select 不显示，直到我点击它的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！