我希望能够 append 选中的值从 mat-select 到下面的文本区域点击

Question

我被要求在工作中使用 Angular 做这个项目，老实说之前没有接触过 Angular 2。 我可以使用 jQuery 做到这一点，但我无法让它在 Angular 中工作。基本上，在这个模式中，我有一个表格，它只是一个模板，您可以在其中选择要包含在 email 中的信息. 我有一个 mat-select 下拉菜单，根据已选择的内容，我想将 append 添加到下面的文本区域，然后单击复选图标。

示例：“您好{{Client Name}}，我们很高兴与{{Company Name}}合作”。

'{{ }}' 中的值是在上面的 mat-select 中选择的选项。

我将在下面包含我的代码，但不幸的是，由于不太确定从哪里开始，它与 go 的差距并不大。

组件.html

<div fxFlex>
  <mat-form-field fxFlex="90" appearance="outline">
    <mat-label>Placeholder</mat-label>
      <mat-select id="placeholderValue" matInput required>
        <mat-option value="name">Client Full Name</mat-option>
        <mat-option value="phone">Client Phone Number</mat-option>
        <mat-option value="email">Client Email Address</mat-option>
        <mat-option value="companyName">Company Name</mat-option>
      </mat-select>
  </mat-form-field>
  <mat-icon fxFlex="10" fxLayoutAlign="center center" (click)="addPlaceholder()">check</mat-icon>
</div>
  
<mat-form-field appearance="outline" class="textarea">
  <mat-label>Message</mat-label>
  <textarea id="placeholderText" matInput formControlName="Description"></textarea>
</mat-form-field>

组件.ts

addPlaceholder(){

}

对于缺少代码，我深表歉意，我一直在研究有关 UI 的问题，然后在过去的几天里一直在寻找一种方法，并尝试将我在 jQuery 中的方式转换为 Angular 并假设我可以在（更改）function 上使用某种表格吗？

这是它需要看起来的图像（可以选择多个选择，因此它也不能替换文本区域中的当前 select）。

我将不胜感激任何建议或帮助。 先感谢您。

Answer 1

我建议您查找 angular 双向绑定属性。（ https://angular.io/guide/two-way-binding ）。

要动态更改 select 的值，您可以使用 [(ngModel)]，如下所示：

 <mat-select id="placeholderValue" [(ngModel)]="variableName" matInput required> <mat-option value="name">Client Full Name</mat-option>... </mat-select>

每次更改 select 字段中的选定值时，该变量都会自动更新。

另一种实现方法是在 mat-select 字段上使用 (selectionChange) 事件并链接一个 function，它将在 select 值每次更改后执行。

 public myFunction(event: any) { this.myVariable = event.value; // other code that you need }

 <mat-select id="placeholderValue" (selectionChange)="myFunction($event)" matInput required> <mat-option value="name">Client Full Name</mat-option>... </mat-select>

对于 output 您在 html 模板中的变量，您可以使用字符串插值 ( https://angular.io/guide/interpolation )。

要动态更改 html 结构，您可以使用 *ngIf 指令 ( https://angular.io/api/common/NgIf )。