angular 4材质，输入字段和服务通信错误答案

【问题标题】：angular 4 material, input field and service communication errorangular 4材质，输入字段和服务通信错误
【发布时间】：2018-06-04 19:44:33
【问题描述】：

问题是下一个。此表单有 2 个用户输入字段，如果我提交表单，组件会将相同的数据从输入字段发送到服务。表单总是发送第一个内容。例如，我发送下一个：用户名 = 用户，注释 = 注释，我得到了用户名 = 用户，注释 = 用户。

我认为问题出在我的组件中，我在其中定义了 noteText.value 但找不到正确的方法。

Service.ts

postNote(note){
            var headers = new Headers();
            headers.append('Content-Type', 'application/json');
            return this.http.post('http://localhost:3000/api/postnotes', JSON.stringify(note), {headers: headers})
                .map(res => res.json());
        }

Component.ts

postNote(event, noteText,){
    var result;
    var newNote = {
      note: noteText.value,
      country: noteText.value,
      username: noteText.value 
    };

    result = this.notesService.postNote(newNote);
    result.subscribe(x => {
      this.notes.push(newNote);
      noteText.note = '';
      noteText.username = '';
    });
  }

Component.html

<div class="example-container">
        <mat-form-field>
          <input matInput placeholder="username" [value]="username" autofocus #noteText>   
        </mat-form-field>
        <mat-form-field>
          <input matInput placeholder="note" [value]="note" autofocus #noteText> 
        </mat-form-field>
        <button (click)="postNote($event, noteText)">Click me !</button>
      </div>

【问题讨论】：

标签： html angular

【解决方案1】：

将ngModel 与noteText.username 变量一起使用

 <input matInput placeholder="username" [(ngModel)]="noteText.username" [value]="username" autofocus #noteText>

【讨论】：

非常感谢！