Добавить угловой материал чипов в поле ввода

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

Так что я нашел ответ, поиграв с разными примерами.По сути, вам нужно два списка, один для хранения чипов, которые вы хотите выбрать пользователю, и другой, который содержит выбранные чипы и показывает их в поле ввода.

Когда пользователь выбирает чип, вы получаете значение чипаот события клика, и вы добавляете его в список.Все остальное легко, потому что оно обрабатывается свойствами и директивами Angular.

Более подробную информацию вы можете увидеть в этой демонстрации

Ждем любых отзывов о коде и улучшениях..