angular - 让 mat-autocomplete 不替换但增加值(value)

Question

我知道使用 mat-autocomplete 的 mat-option 中的 onSelectionChange() 我可以在选择一个选项时做一些事情，但我想要的是自动完成添加的值输入的垫选项而不是替换其内容。

例子:

• 输入:“你好”
• 点击垫选项“世界”
• 输入:“ Hello World ”

如何在不保留表单值的选项卡并存储其先前值并将其放回原处的情况下完成此操作(因为这似乎是一个糟糕的解决方法)？

<mat-form-field class="w-100">
   <textarea [matAutocomplete]="auto" [value]="hello" matInput></textarea>
   <mat-autocomplete #auto="matAutocomplete" >
      <mat-option [value]="world">
         world
      </mat-option>
   </mat-autocomplete>
</mat-form-field>

Answer 1

我的解决方法是始终在选项值前面加上当前输入值

<mat-form-field class="w-100">
   <textarea [matAutocomplete]="auto" [value]="hello" matInput></textarea>
   <mat-autocomplete #auto="matAutocomplete" >
      <mat-option [value]="hello + ' ' + world">  <<=== modified 
         world
      </mat-option>
   </mat-autocomplete>
</mat-form-field>