Asp.net 如何使用AngleMaterial反应表单和Restful API更新数据库

让我以名著为例来解释我的问题。 在我的BookService.ts中，我有一个基于书本模型的角度材质反应表单。当我更改此表单中的某些字段并将其提交到后端以使用Angular HttpClient PUT方法根据记录进行更新时，它不会更新我的数据库，返回时会出现错误。当我调试它时，它显示ID没有定义，当我

console.log（BookForm.value）

我把它放出来：

{$key:1234，Title:“Book Title1”，Topic:“Topic1”}

，不需要说我的HttpClient put Restful API需要这个ID，以便能够更新数据库表中的特定记录。下面是我的简化模拟代码来解释它

BookModel.ts File, My Model

export interface Book{
    ID: number;
    Title: string;
    Topic: string;
}

当然，我知道我需要了解如何将表单值转换为图书模型，并确保在将其传递给http put服务之前，在其中包含该ID。但我不知道如何做到这一点，我在角度和打字方面都是新手，我正在学习。我喜欢在问之前阅读，所以我读了很多文章，但没有一篇对我有用。例如，我尝试了下面关于Stackoverfellow的文章，但对我不起作用

---

我非常感谢各位专业人士，感谢你们的时间和帮助。

当您调用任何

AbstractControl

的

.value

方法时，您的表单中的每个输入都会得到一个对象，该对象具有

prop:value

对。如您所见，您将获得一个空闲对象，可能是因为表单没有“ID”属性，或者可能是因为值为null（当您将对象转换为JSON时，所有具有null值的属性都将被删除）

如果您从HTML中知道id，则可以将其传递到函数中

如果不是这样（我认为不是这样），您可以在使用任何AbstractControl所具有的

.patchValue（{ID:idInfo}）

方法调用服务之前添加ID（在这种情况下，您不需要添加隐藏输入，除非出于其他原因添加它）

在调用该服务之前，请执行一个修补程序，它应该可以正常工作

我不确定这些信息是否足以帮助您，请随时提问

编辑（添加代码示例）：

---

当您调用任何

AbstractControl

的

.value

方法时，您将为表单中的每个输入获取一个具有

prop:value

对的对象。如您所见，您将获得一个空闲对象，可能是因为表单没有“ID”属性，或者可能是因为值为null（当您将对象转换为JSON时，所有具有null值的属性都将被删除）

如果您从HTML中知道id，则可以将其传递到函数中

如果不是这样（我认为不是这样），您可以在使用任何AbstractControl所具有的

.patchValue（{ID:idInfo}）

方法调用服务之前添加ID（在这种情况下，您不需要添加隐藏输入，除非出于其他原因添加它）

在调用该服务之前，请执行一个修补程序，它应该可以正常工作

我不确定这些信息是否足以帮助您，请随时提问

编辑（添加代码示例）：

---

非常感谢你的回答，弗朗西斯科，但正如我说的，我在棱角分明的打字方面真的是个新手，如果你不介意的话，你能告诉我应该在哪里做吗？如果您可以编辑您的答案，将其包括在内，这将是非常可取的。还有一件事，Francisco，当我使用consloe.log表单值时，我确实有ID，但它的内部$key我编辑了我的评论。您之所以有这个名称，是因为您的FormControlName是“$key”，而这正是它使用的符号。您可以更改FormControl的名称，或者更改服务，其中显示

…api/book/${bookObj.'$key']}

基于我的模型，我这样做了，但它没有再次工作const bf=BookService.BookForm；patchValue（{…bf，id:'id'}）；是的，因为我在

…bf

部分犯了一个错误，您正在传递一个解构的表单组。。它应该是…bf.value，但是无论如何，仅仅传递Id也应该有效。尝试一下，虽然你可能需要先创建属性作为FormControl（不确定，还没有尝试过），并且还要小心CapsThank yo，Francisco，因为你的答案太多了，但是正如我说的，我在Angular，Typescript方面真的是个新手，如果你不介意的话，请告诉我应该在哪里做。patchBalue的事情？如果您可以编辑您的答案，将其包括在内，这将是非常可取的。还有一件事，Francisco，当我使用consloe.log表单值时，我确实有ID，但它的内部$key我编辑了我的评论。您之所以有这个名称，是因为您的FormControlName是“$key”，而这正是它使用的符号。您可以更改FormControl的名称，或者更改服务，其中显示

…api/book/${bookObj.'$key']}

基于我的模型，我这样做了，但它没有再次工作const bf=BookService.BookForm；patchValue（{…bf，id:'id'}）；是的，因为我在

…bf

部分犯了一个错误，您正在传递一个解构的表单组。。它应该是…bf.value，但是无论如何，仅仅传递Id也应该有效。尝试一下，尽管您可能需要首先将属性创建为FormControl（不确定，还没有尝试过），并且还要注意大写

BookService.ts File, My Service

BookForm: FormGroup = new FormGroup({
    $key: new FormControl(null),
    Title: new FormControl('', Validators.required),
    Topic: new FormControl('', Validators.required),
});


UpdateBook(bookObj: Book): Observable<Book>
{
return this.http.put<Book>(`...api/book/${bookObj.ID}`, bookObj,{
    headers: new HttpHeaders({
    'Content-Type: 'application/json'
   })
 })
}

Note: This Throw Error, ID Undefined

Book-form.component.html File

<form [formGroup] = "BookService.BookForm" class="FormCls">
 <mat-grid-list rowHeight="200px">
  <mat-grid-tile>
      <div class="form-controles-container">
        <input type="hidden" formControlName="$key" />
        <mat-form-field>
          <input formControlName="Title" matInput placeholder="Title*" />
          <mat-error>Title Needed</mat-error>
        </mat-form-field>
        <mat-form-field>
          <input formControlName="Topic" matInput placeholder="Topic*" />
          <mat-error>Topic Needed</mat-error>
        </mat-form-field>

        <div class="button-row">
          <button mat-raised-button color="primary" type="submit" (click)="onSubmit()">Submit</button>
        </div>

      </div>
  </mat-grid-tile>
 </mat-grid-list>
</form>

Book-form.component.ts File

onSubmit(): void 
{
    BookService.UpdateBook(BookService.BookForm.value).subscribe(
     b => alert(`Book Updated Successfully`),
     err => alert(`Exception While Updating: ${err}`) 
 );
}

onSubmit(): void 
{
    // the lines I added
    const bf = BookService.BookForm;
    bf.patchValue({ ID: 'anyIdYouLike' });

    // what stays the same (except the bf.value shortened version)
    BookService.UpdateBook(bf.value).subscribe(
       b => alert(`Book Updated Successfully`),
       err => alert(`Exception While Updating: ${err}`) 
 );
}