捕获输入值并使用角形材料输入显示单击按钮时的值

Question

我正在Angular上工作，并且有一个简单的代码，如下所示。单击“设置”按钮并通过字符串插值在displayText上显示时，如何捕获输入值？

<div>
    <h3>You just entered: <span>{{displayText}}</span></h3>
</div>
<div>
    <mat-form-field>
        <input matInput placeholder="Insert your text">
    </mat-form-field>
</div>
<div>
    <button mat-button>Set</button>
</div>

Answer 1

只需在您的输入字段上创建一个模板变量：#input

并处理按钮上的click事件：

(click)="displayText = input.value"

尝试一下：

<div>
    <h3>You just entered: <span>{{displayText}}</span></h3>
</div>
<div>
  <mat-form-field>
    <input matInput placeholder="Insert your text" #input>
  </mat-form-field>
</div>
<div>
  <button mat-button color="primary" (click)="displayText = input.value">Set</button>
</div>

---

  

这是您推荐的Working Sample StackBlitz。