角材料垫选择在Firefox中看起来是空的

Question

在我的项目的一种类型的组件中，我有一个mat-select。正如您在下图中的镀铬中看到的那样，它工作得很好。

点击前

点击后：

（铬）

但是当我尝试在Mozilla Firefox中打开同一页面时，却得到了类似的信息。如您所见，它看上去是空的，但从逻辑上讲它可以正常工作。

点击前

点击后：

（Firefox）

代码很简单。它与var有双向绑定。有谁知道为什么会这样？

  <div *ngIf="onEdit && key == 'relationship'" class="d-table-cell" style="float: left !important; max-width: 50%;">
      <div style="margin-top: 10px; margin-bottom: 2px">
          <mat-select placeholder="new relationShip" [(ngModel)]="editedValue">
              <mat-option [value]="'causes'">causes</mat-option>
              <mat-option [value]="'caused_by'">caused_by</mat-option>
              <mat-option [value]="'member_of'">member_of</mat-option>
              <mat-option [value]="'includes'">includes</mat-option>
              <mat-option [value]="'associated_with'">associated_with</mat-option>
          </mat-select>
      </div>
    </div>


  <div *ngIf="onEdit" style="float: right !important; width: 50%;margin-top: 10px;"  >
    <button mat-flat-button color="primary" (click)="onSubmitEdit()" style="width: 10px; margin-right: 4%">submit</button>
    <button mat-flat-button color="warn" (click)="onEdit = !onEdit">cancel</button>
  </div>
</div>

Answer 1

似乎铬对角材料有某种默认设置。例如，不必为其宽度设置一些CSS样式，但对于Firefox而言则是必需的。 我所做的只是在它的style属性中添加了宽度，看起来还不错。