Angular 6 Mat-Select 未通过 http GET 请求定义 user.email答案

【问题标题】：Angular 6 Mat-Select does not define user.email through http GET requestAngular 6 Mat-Select 未通过 http GET 请求定义 user.email
【发布时间】：2019-01-06 18:44:17
【问题描述】：

我想使用 FormGroup 进行选择。用户可以从中选择的数据来自 GET 请求。

Adminpanel.ts

this.userservice.getallusers().subscribe((res: any) =>{
    for (let index = 0; index < res.length; index++) {
      this.users[index] = res[index];
      this.usersemails[index] = this.users[index].email;
      console.log(this.usersemails[index]);
    }

});

数据通过一个 for 循环并被分配给数组 usersemails[index]。数组被正确填满。

来自 HTML 的表单组

<form [formGroup]="AddxpForm" (ngSubmit)="addxponSubmit()">
    <mat-form-field class="geo-full-width">
      <input matInput placeholder="Amount of XP" type="number" name="User_xp" formControlName="user_xp">
    </mat-form-field>
    <mat-select placeholder="User email" name="useremail" fromControlName="useremail">
      <mat-option *ngFor="let useremail of usersemails" [value]="useremail">
        {{useremail}}
      </mat-option>
    </mat-select>
    <button mat-raised-button class="geo-full-width" type="submit" [disabled]="!AddxpForm.valid">Add UserXP</button>
  </form>
</div>

选择也有效，因为我可以选择通过 HTTP GET 请求收到的电子邮件。但是当我尝试再次发布时，正文电子邮件仍然是undefined。

从 ts 文件提交函数

addxponSubmit(){
  this.user.email = this.AddxpForm.value.useremail;
  this.user.experience = this.AddxpForm.value.user_xp
  console.log(this.AddxpForm);
  console.log(this.user);
}

谁能告诉我我在这里做错了什么？

【问题讨论】：

在您发布的代码中，fromControlName="useremail" 有一个错字。应该是formControlName="useremail"。不知道这是否是您的实际错误。
这工作谢谢！

标签： angular rest angular-material mean-stack

【解决方案1】：

正如 fridoo 所评论的，问题是错字，您可以在此处检查表单是否正常工作：

https://stackblitz.com/edit/mat-select-stack?embed=1&file=src/app/app.component.ts

【讨论】：