在Angular 9中无法将变量分配给输入的值。

问题陈述

我似乎无法将我的变量值分配到我的HTML输入值中,并且在控制台中出现了一个错误。TypeError: Cannot read property 'firstName' of undefined. 尽管这个错误并不影响我的应用程序的功能。


我想做的是

我试图为用户制作一个编辑页面,让他们可以随意更新字段。我从我的服务中获取数据,并在HTML的输入中显示人物。这将允许用户编辑当前的信息,而不必再次重新输入。


编码

组成部分

export class EditDocumentComponent implements OnInit {

  // Is for population the fields in the UI so the user does not have to type in everything again
  private savedDocument: Will;

  // The current person ID that has been selected
  private personId: number;

  private form: FormGroup;

  constructor(private builder: FormBuilder, private serv: DataService, private route: ActivatedRoute) {
        this.route.queryParams.subscribe(params => {
          this.personId = params["personId"];
        });
   }

  ngOnInit() {
    // Calls service which gets a single person from the backend server
    this.serv.getSinglePersonById(this.personId).subscribe((result: Will) => {
      this.savedDocument = result;
    });

    this.form = this.builder.group({
      firstName: [''],
      lastName: [''],
      dateOfBirth: [''],
      postalAddress: [''],
      city: [''],
      country: [''],
      provinceState: [''],
    });
  }

  private sendUpdatedData() {
    console.log("Hit submit button");
    console.log("Person: " + this.savedDocument.postalAddress);
  }
}

代码的解释

如你所见,我有一个 personID 在那里,它被送到服务,并被发送到后端,在那里它得到一个 单一 的人。之后,返回的数据被分配给 savedDocument 而这是我用来在用户界面中显示数据的变量。由于我得到的是 firstName 是未定义的,但我通过在上面放置一个 console.log() 在提交表单的方法中调用。sendUpdatedData(). 它不是未定义的。

HTML

<body>
  <h1 class="title">Edit your document here</h1>

  <form [formGroup]="form">

    <!-- Section 1 -->
    <section class="form1">
      <mat-form-field appearance="outline" class="firstName">
        <mat-label>First Name</mat-label>
        <input matInput type="text" maxlength="50" value="{{savedDocument.firstName}}" formControlName="firstName">
      </mat-form-field><br>

      <!-- When I do this, it displays the data, which means it is not undefined
      <h1>{{savedDocument.firstName}}</h1>

      <mat-form-field appearance="outline" class="lastName">
        <mat-label>Last Name</mat-label>
        <input matInput type="text" maxlength="50" value="{{savedDocument.lastName}}" formControlName="lastName">
      </mat-form-field><br>

      <mat-form-field appearance="outline" class="dob">
        <mat-label>Date of Birth</mat-label>
        <input matInput type="text" maxlength="50" value="{{savedDocument.dateOfBirth}}" formControlName="dateOfBirth">
      </mat-form-field>
    </section>

... <!-- More here -->

</form>
</body>

代码的解释

我使用的是 value="{{savedDocument.field}}" 的输入,但它不显示数据。

另外,当我删除 [formGroup] 来自 <form> 标签,它确实会在值中显示数据。

不在输入标签的值中显示数据。

<form [formGroup]="form">
...
</form>

显示输入标签值中的数据。

<form>
...
</form>

解决方案:

你可以在这里做几件事。

1 -在你的值语句中使用 “elvis “操作符。

{{startDocument?.firstName}}

这将在获取firstName之前检查startDocument的存在。 你必须对所有的输入值都这样做。 你可能也想删除formGroup和formcontrolnames。 在这一点上你并没有真正使用反应式表单。 我不知道如果你这样做,你是否能在startDocument中找回值。 不过不是真的很有棱角。

2 – 完全使用反应式表单。 你需要从输入标签中删除值属性,完全使用[formcontrolname]。 你的组件代码需要改成

  ngOnInit() {
    this.form = this.builder.group({
      firstName: [''],
      lastName: [''],
      dateOfBirth: [''],
      postalAddress: [''],
      city: [''],
      country: [''],
      provinceState: [''],
    });

    // Calls service which gets a single person from the backend server
    this.serv.getSinglePersonById(this.personId).subscribe((result: Will) => {
      this.form.get('firstName').setValue(result.firstName);
      this.form.get('lastName').setValue(result.lastName);
      // the rest of the form values filled out
    });


  }

给TA打赏
共{{data.count}}人
人已打赏
未分类

当动态发送数据到绘图中移动一个散点后,FuncAnimation没有响应。

2022-9-9 8:26:20

未分类

在asp.NET MVC中存储API访问密钥的最佳实践。

2022-9-9 8:37:16

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索