Question

我有一个我无法理解的错误。

我有一个非常简单的组件myComponent.html：

<mat-form-field class="full-width">
   <mat-select [(ngModel)]="value"
           class="uppercase"
           name="name"
           placeholder="{{ 'NAME' | translate }}"
           (ngModelChange)="onChange($event)">
  <mat-option *ngFor="let element of elements" [value]="element.id">{{ element.name }}</mat-option>
</mat-select>
</mat-form-field>

并在parent.html中：

<div fxLayout="row" class="header">
  <div fxFlex="50%" class="vehicle-selector">
     <my-component (change)="onSelectElement($event)"></my-component>
  </div>
</div>

如果我有这样的代码，则mat-select未正确显示：

here

但如果我删除并在parent.html中包含其代码，则可以正常工作。

我该如何解决？

Answer 1

它应该有用，顺便说一下你不需要你父母的那个，因为你已经在孩子那里有了

<my-component ></my-component>

<强> WORKING DEMO

mat-form-field作为组件中的唯一子元素

1 个答案: