Question

对Angular有很多新知识，我花了大约一周的时间阅读文档，但仍然无法解决。如果我们有Angular Material芯片列表，例如下面的代码

<input type="text" name="fname" size=35>
<p></p>
<mat-chip-list>
  <mat-chip *ngFor="let dt of chips">{{dt}}</mat-chip>
  <mat-chip >One fish</mat-chip>
  <mat-chip>Two fish</mat-chip>
  <mat-chip >Primary fish</mat-chip>
  <mat-chip >Accent fish</mat-chip>
</mat-chip-list>

当我单击标签以将该标签添加到输入框以便用标签组合制定查询时，该如何做？感谢并感谢您的帮助。

Answer 1

因此，我通过研究不同的示例找到了答案。本质上，您需要两个列表，一个用于保存您希望用户选择的芯片，另一个用于保存选定的芯片并在输入框中显示它们。

当用户选择芯片时，您将从click事件中获取芯片值，并将其添加到列表中。其余的操作很容易，因为它由Angular的属性和指令处理。

您可以在此demo

中查看更多详细信息

期待对代码和改进的任何反馈。

将角形材料屑添加到输入框

1 个答案: