将角料片添加到输入框答案

【问题标题】：Add Angular material chips to input box将角料片添加到输入框
【发布时间】：2019-03-03 13:13:26
【问题描述】：

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

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

【问题讨论】：

见材料团队的示例代码：stackblitz.com/angular/…
不完全。我以前见过。我在想从预定义列表中选择标签后，标签将被添加到输入框中。我似乎找不到类似的例子。

标签： angular angular-material

【解决方案1】：

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

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

你可以在这个demo看到更多细节

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

【讨论】：

我知道这是 3 年前的，但是如果我们想在文本之间添加一些文本，也有一些筹码吗？