在 Angular 4 应用程序的 html 页面中实施删除行实用程序

Question

我试图在 HTML 页面的 Angular 应用程序中删除一行。虽然刚才 HTML 页面上的值不是来自任何后端应用程序。

我写了一个清除或重置下拉值的清除函数。但是现在我想删除整行。喜欢内容以及下拉框。

<form name="myForm" (ngSubmit)="onSubmit()">

<h1>Provider Network Setup</h1>
<h2>Network Association</h2>
<table align=center width=900>
    <tr>
        <th>NETWORK LEVEL</th>
        <th>TYPE</th>
        <th>PROFESSIONAL NETWORK SET</th>
        <th>FACILITY NETWORK SET </th>
    </tr>
    <tr>
        <!--th>LEVEL Name 1<br>level 1<br> <button (click)="myForm.resetFields();">clear</button> &nbsp; <a href="">Delete</a></th-->
        <!--th>LEVEL Name 1<br>level 1<br> <button (click)="onSubmit();">clear</button> &nbsp; <a href="">Delete</a></th-->
        <th>LEVEL Name 1
            <br>level 1
            <br>
            <button class="btn btn-primary btn-large center" type="button" (click)="clearFirstRow(model1, model2)">Clear</button> &nbsp;
            <a href="">Delete</a>
        </th>
        <th>IN Network</th>
        <th>
            <select name="x1" [(ngModel)]="model1">                    
                <option value="Standard Network">Standard Network</option>
                <option value="No Network Restrictions">No Network Restrictions</option>
                <option value="Not Covered">Not Covered</option>
                <option value="Alternative Network">Alternative Network</option>
                <option value="plan Specific Network">plan Specific Network</option>
            </select>
            <br>
            <a href="">networkset 1</a>
        </th>
        <th>
            <select name="x2" [(ngModel)]="model2">
                <option value="Standard Network">Standard Network</option>
                <option value="No Network Restrictions">No Network Restrictions</option>
                <option value="Not Covered">Not Covered</option>
                <option value="Alternative Network">Alternative Network</option>
                <option value="plan Specific Network">plan Specific Network</option>
            </select>
            <br>
            <p>networkset 2</p>
        </th>

    </tr>

    <tr>
        <th>LEVEL Name 2
            <br>level 2
            <br>
            <button class="btn btn-primary btn-large center" type="button" (click)="clearSecondRow(model21, model22)">Clear</button> &nbsp;
            <a href="">Delete</a>
        </th>
        <th>IN Network</th>
        <th>
            <select name="y1" [(ngModel)]="model21">
                <option value="Standard Network">Standard Network</option>
                <option value="No Network Restrictions" selected>No Network Restrictions</option>
                <option value="Not Covered">Not Covered</option>
                <option value="Alternative Network">Alternative Network</option>
                <option value="Plan Specific Network">plan Specific Network</option>
            </select>
            <br>
            <p>networkset 1</p>
        </th>
        <th>
            <select name="y2" [(ngModel)]="model22">
                <option value="Standard Network">Standard Network</option>
                <option value="No Network Restrictions">No Network Restrictions</option>
                <option value="Not Covered">Not Covered</option>
                <option value="Alternative Network">Alternative Network</option>
                <option value="Plan Specific Network" selected>plan Specific Network</option>
            </select>
            <br>
            <p>networkset 2</p>
        </th>

    </tr>
 </form>

有人可以指导我编写删除函数来删除 Angular 4.0 应用程序中 HTML 页面中的一行。 TIA

Answer 1

我建议你将你的行对象添加到一个数组中（我在这里假设你想删除包含两个下拉列表的整个行，如果不是这种情况，原则可以仍然适用）

例如

this.rows = [{
    'heading': 'LEVEL Name 1',
    'networkSet1': 'Standard Network',
    'networkSet2': 'Standard Network'
}, {
    'heading': 'LEVEL Name 2',
    'networkSet1': 'Standard Network',
    'networkSet2': 'Standard Network'
}];

然后你使用 ngFor

构建你的 HTML

<tr *ngFor="let row of rows">
    <th>
        <br>{{row.heading}}
        <br>
        <button class="btn btn-primary btn-large center" type="button" (click)="clearFirstRow(row.networkSet1, row.networkSet2)">Clear</button> &nbsp;
        <a href="">Delete</a>
    </th>
    <th>IN Network</th>
    <th>
        <select name="x1" [(ngModel)]="row.networkSet1">                    
            <option value="Standard Network">Standard Network</option>
            <option value="No Network Restrictions">No Network Restrictions</option>
            <option value="Not Covered">Not Covered</option>
            <option value="Alternative Network">Alternative Network</option>
            <option value="plan Specific Network">plan Specific Network</option>
        </select>
        <br>
        <a href="">networkset 1</a>
    </th>
    <th>
        <select name="x2" [(ngModel)]="row.networkSet2">
            <option value="Standard Network">Standard Network</option>
            <option value="No Network Restrictions">No Network Restrictions</option>
            <option value="Not Covered">Not Covered</option>
            <option value="Alternative Network">Alternative Network</option>
            <option value="plan Specific Network">plan Specific Network</option>
        </select>
        <br>
        <p>networkset 2</p>
    </th>
</tr>

现在您可以通过从数组中删除整行并使用 $index

从您的 HTML 传递索引来删除整行

deleteRow(index): void{
    this.rows.splice(index,1);
}

在 Angular 4 应用程序的 html 页面中实施删除行实用程序

Implementing delete row utility in a html page in Angular 4 Application

html

angular

angular-ui-router