Question

Check output image 从以下代码中，我显示了message数组的内容，但是如何使用angular中的文本框按钮功能实现相同的目的

HandbrakeCLI -i inputtestfile.mp4 -o outputtestfile.mp4 -z "Preset"

TypeScript

<mat-card class="example-card">
    <mat-card-header>
        <img mat-card-avatar src="https://cdn2.iconfinder.com/data/icons/chatbot-line/100/chatbot-07-512.png">
        <mat-card-title>Chat-Bot</mat-card-title>
        <mat-card-subtitle>IMB</mat-card-subtitle>
    </mat-card-header>
   <mat-divider></mat-divider>

<div *ngFor="let i of messages">
  {{i}}
</div>
      
<mat-form-field class="Message">
  <input matInput placeholder="Enter you Message">
</mat-form-field>
<button mat-fab>
  <mat-icon suffix>send</mat-icon>
</button>
</mat-card>

Answer 1

使用ngModel指令绑定您的输入：

<input [(ngModel)]='userInput' matInput placeholder="Enter you Message">

使用click指令绑定发送按钮：

<button mat-fab (click)='send()'>
  <mat-icon suffix>send</mat-icon>
</button>

在您的组件文件中添加userInput字段并发送方法：

userInput: string;

send(): void {
  this.messages.push(this.userInput);
  this.userInput = null;
}

这是您任务的最简单实现。在实际应用中，您最好创建服务来管理数据。另外，您还需要验证用户输入，例如，避免在邮件数组中使用空字符串。

阅读角度文档以更好地了解https://angular.io/tutorial/toh-pt1

从文本框中获取数据并使用材质以角度6显示

1 个答案: