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

【问题标题】：how to angular add label to radiobutton created with *ngFor如何为使用 *ngFor 创建的单选按钮添加标签
【发布时间】：2020-01-10 08:15:57
【问题描述】：

<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>

当我点击标签时，它不像单选按钮那样执行。

【问题讨论】：

标签： html label ngfor

【解决方案1】：

您正在为每个地址创建一个表单。您可以通过用 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>

【讨论】：