JSON
<mat-table [dataSource]="offersColumnRowData" matSort matSortActive="NAME">
<ng-container matColumnDef="SELECT">
<mat-header-cell *matHeaderCellDef> SELECT </mat-header-cell>
<mat-cell *matCellDef="let element">
<mat-checkbox>
</mat-checkbox>
</mat-cell>
</ng-container>
<ng-container matColumnDef="NAME">
<mat-header-cell *matHeaderCellDef> NAME </mat-header-cell>
<mat-cell *matCellDef="let element">{{ element.name }} </mat-cell>
</ng-container>
<ng-container matColumnDef="CODE">
<mat-header-cell *matHeaderCellDef> CODE </mat-header-cell>
<mat-cell *matCellDef="let element">{{ element.code }} </mat-cell>
</ng-container>
<ng-container matColumnDef="DESCRIPTION">
<mat-header-cell *matHeaderCellDef> DESCRIPTION </mat-header-cell>
<mat-cell *matCellDef="let element"> {{ element.description}} </mat-cell>
</ng-container>
<ng-container matColumnDef="CREATEDATE">
<mat-header-cell *matHeaderCellDef> CREATEDATE </mat-header-cell>
<mat-cell *matCellDef="let element"> </mat-cell>
</ng-container>
<ng-container matColumnDef="UNAME">
<mat-header-cell *matHeaderCellDef> UNAME </mat-header-cell>
<mat-cell *matCellDef="let element"> </mat-cell>
</ng-container>
<ng-container matColumnDef="ISACTIVE">
<mat-header-cell *matHeaderCellDef> ISACTIVE </mat-header-cell>
<mat-cell *matCellDef="let element">
<mat-checkbox type="checkbox">
</mat-checkbox>
</mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="offersColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: offersColumns;" (mouseover)="row.hovered = true" (mouseout)="row.hovered = false"></mat-row>
</mat-table>
4 Réponses :
J'ai mis à jour votre Stackblitz, vérifier: https://stackblitz.com/edit/angular-gbf9kz-qg9fvw?file=app%2FTable-basic-example.ts
Données de liaison sur la case à cocher Tag HTML à l'aide de Obtenez la valeur de la propriété active à l'aide de [coché] = "element.active"
(modifier) = "Modifier (élément)"
Merci monsieur, mais vous avez résolu une seule requête que je veux aussi si je sélectionne case à cocher à partir de Sélectionner une colonne, je souhaite imprimer des données de colonne Code de ligne sélectionnées pourriez-vous m'aider à m'aider
J'ai mis à jour le projet Stackblitz. Dis-moi si c'est ce que tu es attendus.
Vous êtes 90% correct mais je ne veux pas une rangée entière, je veux juste une valeur de colonne de code. Lorsque je sélectionne une case à cocher à partir de Sélectionner une colonne, je souhaite stocker la valeur de la colonne de code dans n'importe quelle variable!
Ensuite, vous avez juste besoin de faire quelque chose comme ça.
Selon le complexe que vous allez aller avec cela, vous pouvez soit adopter une approche de formulaires (recommandé), ou vous pouvez ajouter un gestionnaire de changement simple à votre case.
composant modèle la partie clé ici étant ici Vous aurez ensuite un tableau de codes sélectionnés dans la variable (Modifier) = "ReceivececkboxChange (element.code, $ événement)" - Vous pouvez fournir les informations que vous souhaitez à partir de l'élément ou, en effet, l'élément élément à votre fonction. Ensuite, il vous appartient de faire ce que vous voulez de là. Codes sélectionnés . Ce que vous faites avec eux de là, c'est à vous de choisir.
Oui, tu as raison! Lorsque je sélectionne case à cocher à partir de la colonne Cochez la case, la valeur de la colonne de code que je veux imprimer mais je veux en fait, je veux transmettre cette valeur de code à l'API, obtenez-vous mon QN? Alors pourriez-vous me dire comment stocker cette valeur de code dans une variable?
Vous pouvez faire ce que vous voulez avec le code Valeur inside revegecheckboxChange - Vous pouvez le stocker comme une variable, l'ajouter à un tableau ou appeler directement une API. C'est à vous. :)
Comment stocker cette valeur de code dans la variable? Pourriez-vous s'il vous plaît dites-moi!
Une seule erreur vous devriez afficher le code sélectionné sur la base de la case à cocher Sélectionner une colonne, merci!
"Isselected": false, "code" : "TEST", "projectId" : "PROJECT", "name" : "TEST", "description" : "test", "level1" : "1 ", "level2" : "2 ", "level3" : "3", "level4" : "4", "level5" : "5", "active" : false
Utilisez [coché] et (Modifier) pour afficher si Element.active = true et pour modifier la valeur de l'élément.active. Et utilisez l'opérateur conditionnel pour afficher (ou non) la valeur de l'élément.code update : mieux utiliser NGModel -Not [Vérifié] et (Modifier) - < / p>
merci @ricric, mais si je sélectionne case à cocher à partir de Sélectionnez Colonne, je souhaite imprimer des données de colonne Code de ligne sélectionnées pourriez-vous m'aider à m'aider
Voir ma réponse ci-dessous. Cela vous permettra d'obtenir le code de la case à cocher sélectionnée.