时间戳

首页 > 解决方案 > 如何为使用 *ngFor 创建的单选按钮添加标签

html - 如何为使用 *ngFor 创建的单选按钮添加标签

问题描述

<form *ngFor="let i of addresss">
  <label style="display: block;">
    <div class="editing">
      <a (click)="editLocation(i.id)">edit</a>
      <a (click)="deleteLocation(i.id)">delete</a>
    </div>
    <div class="p-3 border mb-3">
      <span class="d-block text-primary h6 text-uppercase">
        <input type="radio" name="action">{{i.title}}</span>
      <p class="mb-0" style="padding-bottom: 10px;">{{i.address}} , {{i.city}} , Near {{i.landmark1}} , {{i.landmark2}} , {{i.state}}</p>
    </div>
  </label>
</form>

当我单击标签时，它不像单选按钮那样执行..在此处输入图像描述

标签： htmllabelngfor

解决方案

您正在为每个地址创建一个表单。您可以通过用 div 包装您的地址来修复它。

例子：


<form>
    <div *ngFor="let i of addresss">
        <label style="display: block;">
            <div class="editing">
                <a (click)="editLocation(i.id)">edit</a>
                <a (click)="deleteLocation(i.id)">delete</a>
            </div>
            <div class="p-3 border mb-3">
                <span class="d-block text-primary h6 text-uppercase">                             
                            <input type="radio" name="action">{{i.title}}</span>
                <p class="mb-0" style="padding-bottom: 10px;">{{i.address}} , {{i.city}} , Near {{i.landmark1}} , {{i.landmark2}} , {{i.state}}</p>
            </div>
        </label>
     </div>
</form>

推荐阅读