时间戳

首页 > 解决方案 > 在角度 8 中显示隐藏 div onClick 动态添加的单选按钮

angular - 在角度 8 中显示隐藏 div onClick 动态添加的单选按钮

问题描述

我需要动态添加单选按钮及其关联<div>。

<li *ngFor="let ins of insuredPatientDetails">
   <div class="p-10">
      <label class="paymentcard_check">{{ins.primaryPayerName}} 
         <span *ngIf="ins.patientPaymentType === 0">(Self insured)</span>
         <input type="radio" name="patientPayee" onchange="viewPatView(ins.insuranceInformationId)">
         <span class="checkmark"></span>
      </label>
   </div>
   <div class="col-md-12 b-t p-15 patId{{ins.insuranceInformationId}}">
      <p>show hide me</p>
      <p>{{ins.insuranceInformationId}}</p>
   </div>
</li>

因此，如果单击第一个单选按钮，我需要显示其 div。同样，应该根据其选定的单选按钮显示 div。

标签： angulartypescriptangular8

解决方案

在 HTML 页面中，

<li *ngFor="let ins of insuredPatientDetails">
   <div class="p-10">
      <label class="paymentcard_check">{{ins.primaryPayerName}} 
         <span *ngIf="ins.patientPaymentType === 0">(Self insured)</span>
         <input type="radio" name="patientPayee" value="{{ins.insuranceInformationId}}" (change)="viewPatView($event)">
         <span class="checkmark"></span>
      </label>
   </div>
   <div class="col-md-12 b-t p-15" *ngIf='"patId"+ins.insuranceInformationId === patId'>
      <p>show hide me</p>
      <p>{{ins.insuranceInformationId}}</p>
   </div>
</li>

在 ts 文件中，

viewPatView(event){
    this.patId = "patId"+event.target.value;
    console.log(this.patId);

  }

这样我可以解决问题，感谢您的帮助

推荐阅读