angular - 从 Angular 材料扩展 MatChip。为什么输入和占位符不再起作用？

Question

我正在从 Angular 材料（版本 9 中的所有内容）扩展 MatChip 组件。我们想要不同于标准的外观和行为。

这种扩展芯片从 Angular 材料中扩展了 MatChip。然后，这个扩展组件用于添加一些样式和一些特定行为的不同包装器中。

然后将包装器放置在标准mat-chip-list 中。

一切都正确渲染。只有输入的占位符不起作用。它位于输入的开头，就像输入为空时一样。

这是扩展基础芯片的定制芯片的代码：

export class ChipComponent extends MatChip implements OnChanges {
   my custom code here
}

html 是一个简单的 div，具有自定义形状和元素，并使用ng-content投影在里面。

然后是专门的包装器组件：

<form [form-group]="myFormGroup">
  <custom-chip disableRipple="true">

    <div> some projected content here </div>

  </custom-chip>
</form>

然后，这是我在mat-chip-list中使用包装器的代码。

<mat-form-field class="example-chip-list" style="width: 100%">
<mat-chip-list #chipList aria-label="Fruit selection">
  <my-custom-chip-wrapper
    *ngFor="let selected of selectedFruits; let index = index"
    [fruit]="selected"
  >
  </my-custom-chip-wrapper>
  <input
    #fruitInput
    [formControl]="fruitFormControl"
    [matAutocomplete]="auto"
    [matChipInputFor]="chipList"
    placeholder="My custom chip 1"
    >
</mat-chip-list>
<mat-autocomplete #auto="matAutocomplete" (optionSelected)="selectedFruit($event)">
  <mat-option *ngFor="let f of fruits | async" [value]="f">
    {{f}}
  </mat-option>
</mat-autocomplete>
</mat-form-field>

根据我的调查，似乎mat-form-field-should-float类没有添加到 mat-form-field 组件中，并且包含占位符字符串的跨度没有丢失mat-empty mat-form-field - 空班。

这是结果：

任何人都可以帮助我吗？

标签： angularangular-material