Angular 如何在表4中动态添加具有唯一ID的html行

在表中添加这一行并没有限制，您可以使用循环或任何实用的方法来添加行。请记住，行中有嵌套循环，用户也可以通过单击删除整个行

这是我的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>

处方
药名
剂量
剂量类型
早餐
午餐
夜宵
晚餐
天
评论
之前
之后
之前
之后
之前
之后
之前
之后


{{medList.name}（{{medList.price}}）
{{values}}

{{medList.manufacturer}}
成分：
{{components.name}

+添加更多

我想在单击AddMore按钮时，使用唯一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>

{{medList.name}（{{medList.price}}）
{{values}}

{{medList.manufacturer}}
成分：
{{components.name}

首先创建行的模型

然后创建一个全局变量作为数组，或者如果您有模型，则使用您的模型作为变量类型

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

在HTML中，使用数组循环行

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

希望这对您有所帮助：）

    addMore() {
       var medData = new AddMedicineModel()   // creating object of your model class
       this.medicineAddList.push(medData) ;
} 

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

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