我希望能夠 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 )。