web-dev-qa-db-fra.com

Angular 4: Comment ajouter et supprimer dynamiquement des lignes dans un tableau

Dans mon angular angulaire, j'ai 3 entrées dites - code, nom et prix. Et il y a un tableau qui affiche la sélection de l'utilisateur. enter image description here

Lorsque je clique sur le bouton Ajouter, la sélection dans la liste déroulante doit être renseignée dans la table,

Product     Price      Action
124578-ABC  100        <Delete Button>

Lorsque je clique sur le bouton Supprimer, la ligne correspondante doit être supprimée. J'ai essayé de faire cela en utilisant jQuery. Mais je veux connaître la manière de le faire angular.

angular
16
Poppy

Essayez comme ça:

Dans cet exemple, je viens d'utiliser textbox au lieu de vos types d'entrée

comme une table

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

exemple TypeScript:

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);
    }
}
41
Chandru