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

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 不会正确显示：

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

我该如何解决？

Answer 1

它应该可以工作，顺便说一句，你不需要在你的 parent 中，因为你已经在 child

中有了它

<my-component ></my-component>

WORKING DEMO

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

mat-form-field as only child in component

angular-material

angular-material2

angular

angular5