Angular 如何将剑道自动完成字段更改为更细的角度材质输入字段？

我想将剑道自动完成字段更改为与角度材质输入相同的字段。

剑道UI自动完成字段如下所示

<div class="example-wrapper">
    <kendo-autocomplete [data]="listItems" [placeholder]="'e.g. Andorra'">
    </kendo-autocomplete>
</div>

我想改变上面的剑道UI自动完成字段如下

<div class="example-wrapper">
    <kendo-autocomplete [data]="listItems" [placeholder]="'e.g. Andorra'">
    </kendo-autocomplete>
</div>

剑道UI自动完成字段的HTML如下所示

<div class="example-wrapper">
    <kendo-autocomplete [data]="listItems" [placeholder]="'e.g. Andorra'">
    </kendo-autocomplete>
</div>

材质UI的HTML如下所示

<mat-form-field class="example-full-width">
    <input type="text" placeholder="Groups"  matInput [formControl]="queryField">
</mat-form-field>

---

可以这样做吗？

如果您使用剑道，可以在材质设计中包装剑道组件

您可以在项目中安装剑道主题材料

npm install --save @progress/kendo-theme-material

在

angular.json

文件中，添加剑道主题材料的路径

{
  "apps": [
    {
      "styles": [
        "node_modules/@progress/kendo-theme-material/dist/all.css"
      ]
    }
  ]
}

---

它将在材料设计中转换所有剑道组件。

您使用过剑道的材料主题吗？您可以使用角度材料自动完成---------