多输入角6

Question

我无法将新值发送到后端

在php后端获取“config”：

0:{id: "basic1", legend: "Basic 1", limit: 3, pos: 1}
1:{id: "basic2", legend: "Basic 2", limit: 3, pos: 2}
2:{id: "basic3", legend: "Basic 3", limit: 3, pos: 3}

设置FormBuilder：

this.categoryForm = this.formBuilder.group({
  pos: ['', Validators.required],
  limit: ['', Validators.required]
});

打印html：

<form [formGroup]="categoryForm" (ngSubmit)="saveCategory()">
    <tr *ngFor="let data of config; let i = index;" class="d-flex">
      <td class="col-1"><i class="material-icons hand" (click)="categoryExcluirOpen(categoryDelete,i)">delete_forever</i></td>
      <td class="col-3"><input type="text" class="form-control" placeholder="_" formControlName="pos" [value]="data.pos" maxlength="7"></td>
      <td class="col-5">{{data.legend}}</td>
      <td class="col-3"><input type="text" class="form-control" placeholder="_" formControlName="limit" [value]="data.limit" maxlength="7"></td>
    </tr>
</form>

保存：

this.categoryService.saveCategory(this.config)
    .subscribe(
      data => {
        this.loading = false;
        console.log(data);
      }, error => {});

我编辑它们未被带到后端的值

StackBlitz

Answer 1

saveCategory()需要是一个需要在ComponentClass上定义的方法。它不会直接调用您的服务方法。

我假设this.config将成为id和legend属性的对象。你期待从表格中获得limit和pos。

在Component Class中添加一个名为saveCategory()的方法。

saveCategory() {
  const configToStore = {
    ...this.config,
    ...this.categoryForm.value
  }
  this.categoryService.saveCategory(configToStore)
    .subscribe(
      data => this.loading = false, 
      error => {}
    );
}