如何使用表中的唯一ID動態添加html行Angular4

Question

在表內添加此行沒有限制，您可以使用循環或任何其他內容以務實的方式添加行。並記住行內有嵌套循環，用戶也可以刪除整行。

這是我的html。

<div class="fullWrap" style="margin-top: 20px;"> 
<h4 class="blue">Prescription</h4> 
<table class="medicineInstGrid addPrescriptionGrid"> 
    <tr class="head"> 
     <th rowspan="2">Name Of Medicine</th> 
     <th rowspan="2" width="50">Dose</th> 
     <th rowspan="2" width="100">Dose Type</th> 
     <th colspan="2">Breakfast</th> 
     <th colspan="2">Lunch</th> 
     <th colspan="2">Evening Snack</th> 
     <th colspan="2">Dinner</th> 
     <th rowspan="2" width="50">Days</th> 
     <th rowspan="2">Comments</th> 
    </tr> 
    <tr class="head"> 
     <th>Before</th> 
     <th>After</th> 
     <th>Before</th> 
     <th>After</th> 
     <th>Before</th> 
     <th>After</th> 
     <th>Before</th> 
     <th>After</th> 
    </tr> 
    <tr> 
     <td> 
      <div class="fullWrap medicineSearchWrap"> 
       <input type="text" name="" required value="{{medSearchOnClickName}}" 
        #searchMedBox (keyup)="getSearchMedInput(searchMedBox.value)" > 
       <div class="fullWrap" *ngIf="medicineSearchDropDown"> 
        <div class="innerLoadingWrap" style="z-index:999;width: 400px" *ngIf="medSearchLoader"> 
         <md-spinner strokeWidth="7"></md-spinner> 
        </div> 
        <ul class="fullWrap medicineSearchResult" > 
         <li *ngFor="let medList of searchMedicine" > 
          <div class="fullWrap" style="padding: 10px" (click)="getMedicineOnClick(medList.name, medList.form); medicineSearchDropDown=false"> 
           <div class="fullWrap"> 
            <h4> 
             {{medList.name}} (<div class="rupeeIcon"></div>{{medList.price}})</h4> 
            <p>{{values}}</p> 
           </div> 
           <div class="fullWrap"> 
            <span class="pullLeft">{{medList.manufacturer}}</span> 
            <span class="pullRight"> 
             <b>Constituents: </b> 
             <span *ngFor="let constituents of medList.constituents"> 
              {{constituents.name}} 
             </span> 
            </span> 
           </div> 
          </div> 
         </li> 
        </ul> 
       </div> 
      </div> 
     </td> 
     <td> 
      <div class="fullWrap"> 
       <input type="text" name="" required> 
      </div> 
     </td> 
     <td> 
      <div class="fullWrap"> 
       <input type="text" value="{{medSearchOnClickDoseType}}" name=""> 
      </div> 
     </td> 
     <td> 
      <div class="customCheckBox" style="margin-bottom:0"> 
       <input type="checkbox" name="" value=""> 
       <div class="check"></div> 
      </div> 
     </td> 
     <td> 
      <div class="customCheckBox" style="margin-bottom:0"> 
       <input type="checkbox" name="" value=""> 
       <div class="check"></div> 
      </div> 
     </td> 

     <td> 
      <div class="customCheckBox" style="margin-bottom:0"> 
       <input type="checkbox" name="" value=""> 
       <div class="check"></div> 
      </div> 
     </td> 
     <td> 
      <div class="customCheckBox" style="margin-bottom:0"> 
       <input type="checkbox" name="" value=""> 
       <div class="check"></div> 
      </div> 
     </td> 

     <td> 
      <div class="customCheckBox" style="margin-bottom:0"> 
       <input type="checkbox" name="" value=""> 
       <div class="check"></div> 
      </div> 
     </td> 
     <td> 
      <div class="customCheckBox" style="margin-bottom:0"> 
       <input type="checkbox" name="" value=""> 
       <div class="check"></div> 
      </div> 
     </td> 

     <td> 
      <div class="customCheckBox" style="margin-bottom:0"> 
       <input type="checkbox" name="" value=""> 
       <div class="check"></div> 
      </div> 
     </td> 
     <td> 
      <div class="customCheckBox" style="margin-bottom:0"> 
       <input type="checkbox" name="" value=""> 
       <div class="check"></div> 
      </div> 
     </td> 
     <td> 
      <div class="fullWrap"> 
       <input type="text" name="" required> 
      </div> 
     </td> 
     <td> 
      <div class="fullWrap"> 
       <input type="text" name=""> 
      </div> 
     </td> 
    </tr> 

</table> 

<div class="normalSection" style="padding: 0 5px"> 
    <div class="greyAddBtn"> 
     <h4 class="blue adddMore">+ Add More</h4> 
    </div> 
</div> 

，我想唯一ID添加更多按鈕，點擊添加表多次內部本節。

<tr> 
     <td> 
      <div class="fullWrap medicineSearchWrap"> 
       <input type="text" name="" required value="{{medSearchOnClickName}}" 
        #searchMedBox (keyup)="getSearchMedInput(searchMedBox.value)" > 
       <div class="fullWrap" *ngIf="medicineSearchDropDown"> 
        <div class="innerLoadingWrap" style="z-index:999;width: 400px" *ngIf="medSearchLoader"> 
         <md-spinner strokeWidth="7"></md-spinner> 
        </div> 
        <ul class="fullWrap medicineSearchResult" > 
         <li *ngFor="let medList of searchMedicine" > 
          <div class="fullWrap" style="padding: 10px" (click)="getMedicineOnClick(medList.name, medList.form); medicineSearchDropDown=false"> 
           <div class="fullWrap"> 
            <h4> 
             {{medList.name}} (<div class="rupeeIcon"></div>{{medList.price}})</h4> 
            <p>{{values}}</p> 
           </div> 
           <div class="fullWrap"> 
            <span class="pullLeft">{{medList.manufacturer}}</span> 
            <span class="pullRight"> 
             <b>Constituents: </b> 
             <span *ngFor="let constituents of medList.constituents"> 
              {{constituents.name}} 
             </span> 
            </span> 
           </div> 
          </div> 
         </li> 
        </ul> 
       </div> 
      </div> 
     </td> 
     <td> 
      <div class="fullWrap"> 
       <input type="text" name="" required> 
      </div> 
     </td> 
     <td> 
      <div class="fullWrap"> 
       <input type="text" value="{{medSearchOnClickDoseType}}" name=""> 
      </div> 
     </td> 
     <td> 
      <div class="customCheckBox" style="margin-bottom:0"> 
       <input type="checkbox" name="" value=""> 
       <div class="check"></div> 
      </div> 
     </td> 
     <td> 
      <div class="customCheckBox" style="margin-bottom:0"> 
       <input type="checkbox" name="" value=""> 
       <div class="check"></div> 
      </div> 
     </td> 

     <td> 
      <div class="customCheckBox" style="margin-bottom:0"> 
       <input type="checkbox" name="" value=""> 
       <div class="check"></div> 
      </div> 
     </td> 
     <td> 
      <div class="customCheckBox" style="margin-bottom:0"> 
       <input type="checkbox" name="" value=""> 
       <div class="check"></div> 
      </div> 
     </td> 

     <td> 
      <div class="customCheckBox" style="margin-bottom:0"> 
       <input type="checkbox" name="" value=""> 
       <div class="check"></div> 
      </div> 
     </td> 
     <td> 
      <div class="customCheckBox" style="margin-bottom:0"> 
       <input type="checkbox" name="" value=""> 
       <div class="check"></div> 
      </div> 
     </td> 

     <td> 
      <div class="customCheckBox" style="margin-bottom:0"> 
       <input type="checkbox" name="" value=""> 
       <div class="check"></div> 
      </div> 
     </td> 
     <td> 
      <div class="customCheckBox" style="margin-bottom:0"> 
       <input type="checkbox" name="" value=""> 
       <div class="check"></div> 
      </div> 
     </td> 
     <td> 
      <div class="fullWrap"> 
       <input type="text" name="" required> 
      </div> 
     </td> 
     <td> 
      <div class="fullWrap"> 
       <input type="text" name=""> 
      </div> 
     </td> 
    </tr> 

Answer 1

首先創建你的行的模型。

然後創建一個全局變量作爲一個數組，或者如果你有模型，然後使用你的模型作爲你的變量的類型。

medicineAddList = Array<AddMedicineModel>() ; // your medicine model class 

然後用您的陣列創建addMore方法

​​

在你的HTML循環的排

<tr *ngfor="let medObj in medicineAddList"> 

添加addMore方法在您添加更多按鈕

<h4 class="blue adddMore" (click)="addMore()"> Add More</h4> 

希望這會幫助你:)