将 pynamic 卡作为表单提交到 Angular 组件

Posted 2023-02-24

【中文标题】将 pynamic 卡作为表单提交到 Angular 组件

【英文标题】：Posting pynamic card as form submission to angular component

【发布时间】：2018-04-30 18:43:36

【问题描述】：

这是我根据数据库结果显示 n 张卡片的屏幕，每个卡片的加入按钮都会出现。当用户点击加入按钮时，该特定卡片数据应发布到组件。

我想过使用隐藏字段，但卡片中显示的值是动态的，每个隐藏字段都有动态 ID，我无法发布这些动态 ID 数据。

有人可以帮我如何将特定的卡片数据发送到组件 ts 以及如何在那里读取它

这是我的html：

<div class="card" *ngFor="let contest of contests">
  <div class="container">
    <form (ngSubmit)="initiateJoinContest(f)" #f="ngForm">
    <h4><b>‌contest.data.name</b></h4>
    <div class="row">
      <div class="col-sm-2" >Join Fee : </div>
      <div class="col-sm-2">Rs.‌contest.data.join_fee</div>
    </div>
    <div class="row">
      <div class="col-sm-2">Created on </div>
      <div class="col-sm-2">‌contest.data.creation_date</div>
    </div>
    <div class="row">
      <div class="col-sm-2">Contest ends On : </div>
      <div class="col-sm-2">‌contest.data.end_date</div>
    </div>
    <div class="row">
      <div class="col-sm-2">Ends In : </div>
      <div class="col-sm-2">‌contest.data.ends_in</div>
    </div>
    <div style="text-align: right;width:40%"><button type="submit" class="btn btn-primary">Join</button></div>
    </form>
  </div>
</div>

【问题讨论】：

你要提交什么？您可以为此分享您的 js/ts 代码吗？您的哪一部分数据是动态的？

我得到了答案。而不是使用表单提交。我只是使用按钮提交，然后单击该按钮将相应的比赛信息发送到 ts。有效。我能够在组件中获取选定的比赛数据

【参考方案1】：

我得到了答案。而不是使用表单提交。我只是使用按钮提交，然后单击该按钮将相应的比赛信息发送到 ts。有效。我能够在组件中获取选定的比赛数据。