Góc 4: Cách tự động thêm và xóa các hàng trong một bảng

Question

Trong ứng dụng góc cạnh của tôi, tôi có 3 yếu tố đầu vào nói - mã, tên và giá. Và có một bảng hiển thị lựa chọn người dùng.

Khi tôi bấm vào nút add, việc lựa chọn từ menu thả xuống nên được dân cư vào bảng như,

Product  Price  Action 
124578-ABC 100  <Delete Button> 

Khi tôi bấm vào nút delete, hàng tương ứng nên được xóa. Tôi đã thử làm điều này bằng cách sử dụng jquery. Nhưng tôi muốn biết cách thực hiện nó.

Answer 1

Hãy thử như thế này:

Trong ví dụ này tôi chỉ sử dụng hộp thay vì các loại đầu vào của bạn

bảng như

<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> 

mẫu nguyên cảo:

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

Chỉ cần thêm hai hàng với cùng một trường. một với cùng một lĩnh vực sẽ tránh fieldArray ban đầu vô một với cùng Dòng cho * ngFor như thế này

<table> 

<tr> 
</tr> 

<tr *ngFor> 
</tr> 

</table>