时间戳

首页 > 解决方案 > mat-select 在我点击它之前不会显示

angular - mat-select 在我点击它之前不会显示

问题描述

mat-select 在我单击它之前不会显示，也不会显示值。

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'}
  ]

这是 select 在选定选项 [1] 之后的样子：https ://i.stack.imgur.com/K8Yt1.png

标签： angularangular-material

解决方案

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

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

推荐阅读