有 mat-autocomplete 不是替换而是增加价值

lol*_*101 5 typescript angular-material angular

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

例子:

  • 输入:“你好”
  • 单击垫选项“世界”
  • 输入:“你好世界”

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

<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>
Run Code Online (Sandbox Code Playgroud)

Gün*_*uer 5

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

<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>
Run Code Online (Sandbox Code Playgroud)