时间戳

首页 > 解决方案 > 将角料片添加到输入框

angular - 将角料片添加到输入框

问题描述

对 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>

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

标签： angularangular-material

解决方案

所以我通过玩不同的例子找到了答案。本质上，您需要两个列表，一个保存您希望用户选择的筹码，另一个保存选定的筹码并在输入框中显示它们。

当用户选择一个筹码时，您从点击事件中获取筹码值并将其添加到列表中。其余的很容易，因为它由 Angular 的属性和指令处理。

您可以在此演示中查看更多详细信息

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

推荐阅读