从 ngFor 中获取一个值以用作嵌套表单中的参数

Question

我有一组术语正在循环显示一些字典结果，这些结果有 link 与之相关。每个字典术语我都有一个小表格，它触发一个 lambda 函数到运行一个添加 link 的存储过程。添加一个 link 的参数之一是当前词典术语 ID。据我所知，从我在 lambda 端的 Java 错误可以看出，该函数没有发送术语 ID，所以我觉得我在尝试获取前面的 ID 时做错了什么-结束。

表单模板

<ul>
  <li *ngFor="let term of terms">
      {{ term.term }} - {{ term.def }}
      <ul>
        <li *ngFor="let link of term.links">
          {{ link.name }} - {{ link.url }}
        </li>
      </ul>
      <div class="add-link">
        <form [formGroup]="addRelatedLinkForm" (ngSubmit)="addRelatedLinkSubmit(term.id, addRelatedLinkForm)">
          <input id="name" formControlName="name" type="text" placeholder="Link name">
          <input id="url" formControlName="url" type="text" placeholder="URL">
          <button type="submit">Add Related Link</button>
        </form>
      </div>
  </li>
</ul>

添加相关Link服务

addRelatedLink(token: String, id: Number, link: Link): Observable<any> {
    this.link_url = "http://localhost:4200/link";
    let body = {
      "name": link.name,
      "url": link.url,
      "term_id": id
    }
    const headers = new HttpHeaders({
      'Authorization': 'Bearer ' + token,
      'Content-Type': 'application/json'
    });
    return this.http.post<any>(
      this.link_url,
      body,
      {
        headers: headers
      }
    )
  }
}

组件函数

addRelatedLinkForm = this.formBuilder.group({
    name: '',
    url: '',
    term_id: ''
  })


addRelatedLinkSubmit(id: number): void {
    this.termsService.getAWSToken().subscribe(token => {
      this.termsService.addRelatedLink(token.access_token, id, this.addRelatedLinkForm.value).subscribe(data => {
        console.log(data);
      });
    });
  }

非常感谢任何正确方向的观点！

编辑

问题已解决，Roya 让我意识到有些地方不对劲，调试后，我注意到通过线路发送的数据是正确的，我只是没有匹配 Lambda 端的一些 Java 参数.

Answer 1

方法定义和调用有区别！

您在模板 addRelatedLinkSubmit(term.id, addRelatedLinkForm) 调用方法的地方有两个参数，在您定义方法的组件中 addRelatedLinkSubmit(id: number): void 它接受一个参数。

从 ngFor 中获取一个值以用作嵌套表单中的参数

Grabbing a value from ngFor to use as a parameter in a nested form

angular

forms

ngfor