如何在表Angular4中使用唯一ID动态添加html行

时间:2017-08-30 07:53:54

标签: angular typescript

在表格中添加此行没有限制,您可以使用循环或任何实际添加行的内容。请记住,行内有嵌套循环,用户也可以一键删除整行。

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

1 个答案:

答案 0 :(得分:1)

首先创建一个行的模型。

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

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

然后创建一个addMore方法

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

在您的HTML循环中,您的数组行

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

在添加更多按钮

中添加addMore方法
<h4 class="blue adddMore" (click)="addMore()"> Add More</h4>

希望这会对你有所帮助:)