Html 在Angular中为mat卡创建搜索栏？

我的角度项目本质上是一堆有按钮和图像的垫子卡。单击按钮时，它会将您引导到另一个网站。非常基本。代码如下所示：

<mat-card id="CARDBOX" *ngFor="let box of box">
                      <img class="logoy" src="{{box.image}}" alt="Tesla" height=35px>
                      <a href="{{box.link}}" class="button">{{box.button_name}}</a>
                      <input type="image" id="info" title="Click for description" src="{{box.info}}" height=20px/>
</mat-card>

看起来像这样

---

我想在页面顶部添加一个搜索栏，这样人们就可以搜索某个链接，并从搜索栏附带的自动完成下拉列表中访问它。即，如果键入“示例”，则自动完成将给出示例1、示例2、示例3，您可以单击该示例，它将以与单击mat卡上的按钮相同的方式将您链接到相应的网站。有什么样的图书馆可以让这变得容易吗？还是我必须在后端实现它？这有可能做到吗？我找不到关于这件事的任何文件。如果是这样，我应该如何在我的项目中实现这一点？

使用角度材质

自动完成

以下是您的搜索栏

{{option}}

是否要筛选卡片或在下拉列表中显示内容链接？是否希望在下拉列表中查看卡片的名称，然后当我单击该名称时，它会将我链接到网站（如果可能）。如果不可能的话，如果你有其他建议，我会很满意的。因为你已经在使用

角材料了

你可以使用[Material Autocomplete][为此。我将如何实现它？至少从一开始？我创建了一个searchbar对象并使用Material Autocomplete？你能帮我在回答部分发布一些东西吗？我非常感谢你点击我的选项将我链接到页面外？使用

窗口。打开（'url'））

选择事件是否有办法使选项不会在开始时显示？是否有我需要进行的导入？在我的TypeScript中，我遇到了许多错误。是的，您需要在

应用程序中导入必要的模块。模块

。例如-

MatAutocompleteModule