角度4で選択して（入力の）フォントファミリを変更しますか？

Question

フォントファミリを選択してこの入力テキストのフォントを変更したいのですが、動作していないので...いくつかのトリガを試しましたが、どれもうまくいきませんでした。私はこれまで持っている。このような要素のバインドのため

HTML

<mat-form-field id="input-font" (click)="changeFont (this);"> 
     <mat-select placeholder="Font"> 
      <mat-option value="Times New Roman" selected ="selected">Times 

       </mat-option> 
       <mat-option value="Arial">Arial   
       </mat-option> 
       <mat-option value="Roboto">Roboto   
       </mat-option> 


     </mat-select> 
     </mat-form-field> 

<form novalidate #f="ngForm" (submit)="onSubmit(f);"> 
     <mat-form-field> 
      <input matInput placeholder="Name" 
     id="output-text" 
      name="name" 
      [ngStyle]="{'color':'red', 'font-size':'17px'}" 
      [(ngModel)]="user.name" 
      #userName="ngModel" 
      placeholder="Name" 
      minlength="2" 
      required> 
     </mat-form-field> 

活字体

changeFont(font){ 
    document.getElementById("output-text").style.fontFamily = font.value; 
    } 

Answer 1

使用change：

<mat-select placeholder="Font" [(ngModel)]="selectedFont" (change)="changeFont()"> 
     <mat-option value="Times New Roman" selected ="selected">Times 
       </mat-option> 
       <mat-option value="Arial">Arial   
       </mat-option> 
       <mat-option value="Roboto">Roboto   
       </mat-option> 
    </mat-select> 

そして、あなたのコンポーネントのtsでは、selectedFontを設定しました変数publicとすることができます：

changeFont(){ 
    document.getElementById("output-text").style.fontFamily = this.selectedFont; 
}