Angular 4：如何动态添加和删除表中的行

Question

在我的 Angular 应用程序中，我有 3 个输入，比如代码、名称和价格。并且有一个表格显示用户选择。

当我点击添加按钮时，下拉列表中的选择应该被填充到表格中，

Product     Price      Action
124578-ABC  100        <Delete Button>

当我点击删除按钮时，相应的行应该被删除。 我尝试使用 jquery 执行此操作。但我想知道这样做的角度。

Answer 1

试试这样：

在这个例子中我只是使用了文本框而不是你的输入类型

表格样

<table class="table table-striped table-bordered">
    <thead>
        <tr>
            <th>Code</th>
            <th>Name</th>
            <th>Price</th>
            <th>Action</th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let field of fieldArray; let i = index">
            <td>
                <input [(ngModel)]="field.code" class="form-control" type="text" name="{{field.code}}" />
            </td>
            <td>
                <input [(ngModel)]="field.name" class="form-control" type="text" name="{{field.name}}" />
            </td>
            <td>
                <input [(ngModel)]="field.price" class="form-control" type="text" name="{{field.price}}" />
            </td>
            <td>
                <button class="btn btn-default"  type="button" (click)="deleteFieldValue(i)">Delete</button>
            </td>
        </tr>
        <tr>
            <td>
                <input class="form-control" type="text" id="newAttributeCode" [(ngModel)]="newAttribute.code" name="newAttributeCode" />
            </td>
            <td>
                <input class="form-control" type="text" id="newAttributeName" [(ngModel)]="newAttribute.name" name="newAttributeName" />
            </td>
            <td>
                <input class="form-control" type="text" id="newAttributePrice" [(ngModel)]="newAttribute.price" name="newAttributePrice" />
            </td>
            <td>
                <button class="btn btn-default" type="button" (click)="addFieldValue()">Add</button>
            </td>
        </tr>
    </tbody>
</table>

打字稿示例：

export class Component {
    private fieldArray: Array<any> = [];
    private newAttribute: any = {};

    addFieldValue() {
        this.fieldArray.push(this.newAttribute)
        this.newAttribute = {};
    }

    deleteFieldValue(index) {
        this.fieldArray.splice(index, 1);
    }
}

Answer 2

试试这个：

grid-view-component.html

<div class="container" style="margin-top: 5%">    
        <table class="table table-striped table-bordered">    
            <thead>    
                <tr>    
                    <th>Action</th>    
                    <th>Nmae</th>    
                    <th>Email</th>    
                    <th>Phone</th>    
                </tr>    
            </thead>    
            <tbody>    
                 <tr *ngFor="let dynamic of dynamicArray; let i = index;">    
                  <td (click)="deleteRow(i)">    
                    <i class="fa fa-trash fa-2x"></i>    
                  </td>    
                    <td>    
                      <input [(ngModel)]="dynamicArray[i].name" class="form-control" type="text" />    
                    </td>    
                    <td>    
                      <input [(ngModel)]="dynamicArray[i].email" class="form-control" type="email" />    
                    </td>    
                    <td>    
                      <input [(ngModel)]="dynamicArray[i].phone" class="form-control" type="number"/>    
                    </td>    
                </tr>    
                <tr>    
                  <td (click)="addRow()">    
                    <i class="fa fa-plus fa-2x"></i>    
                  </td>    
                </tr>    
            </tbody>    
        </table>    
</div>  

grid-view-component.ts

import { Component, OnInit } from '@angular/core';
import { ToastrService } from 'ngx-toastr';  
import { DynamicGrid } from '../grid.model';

@Component({
  selector: 'app-grid-view',
  templateUrl: './grid-view.component.html',
  styleUrls: ['./grid-view.component.css']
})
export class GridViewComponent implements OnInit {

      constructor(private toastr: ToastrService) { }  

      dynamicArray: Array<DynamicGrid> = [];  
      newDynamic: any = {}; 

      ngOnInit(): void {  
          this.newDynamic = {name: "", email: "",phone:""};  
          this.dynamicArray.push(this.newDynamic);  
      }  

      addRow() {    
        this.newDynamic = {name: "", email: "",phone:""};  
          this.dynamicArray.push(this.newDynamic);  
          this.toastr.success('New row added successfully', 'New Row');  
          console.log(this.dynamicArray);  
          return true;  
      }  

      deleteRow(index) {  
          if(this.dynamicArray.length ==1) {  
            this.toastr.error("Can't delete the row when there is only one row", 'Warning');  
              return false;  
          } else {  
              this.dynamicArray.splice(index, 1);  
              this.toastr.warning('Row deleted successfully', 'Delete row');  
              return true;  
          }  
      }
} 

grid.model.ts

export class DynamicGrid{     
    name:string;  
    email:string;  
    phone:string;  
}

Answer 3

只需添加具有相同字段的两行。一个具有相同字段的将避免 fieldArray 最初为 null，而另一个具有相同字段的 *ngFor 像这样

<table>

<tr>
</tr>

<tr *ngFor>
</tr>

</table>