Question

我需要动态添加单选按钮及其关联的<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。

Answer 1

在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);

  }

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

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

1 个答案: