J'ai une table en Angular et je souhaite en afficher seulement 3 lignes dans le composant parent et lorsque vous appuyez sur le bouton de la table complète pour voir les entrées complètes de la table.
<div class="parent">
<div class="col-lg-7">
<button class="btn font-weight-bold" (click)="openFullTable()">Full Table</button>
<app-table></app-table>
//here I want to display only 3 rows
</div>
........
</div>
3 Réponses :
Vous pouvez utiliser SlicePipe
<li *ngFor="let i of collection | slice:1:3">{{i}}</li>
En supposant que vous définissez une variable appelée showFullTable sur true dans la méthode openFullTable , vous pouvez utiliser * ngFor de cette façon
<app-table *ngFor="let data of (showFullTable ? collection : (collection | slice:0:3))" > </app-table>"
tenez compte de la tranche commençant par 0, pas par 1, si vous écrivez tranche: 1: 3 affiche les deuxième, troisième et quatrième éléments
parent template:
...
<button class="btn font-weight-bold" (click)="openFullTable()">Full Table</button>
<app-table [isFullTable]='isFullTable'></app-table>
...
parent component:
...
isFullTable: boolean = true;
openFullTable() {
this.isFullTable = !this.isFullTable;
}
...
child component class:
...
export class Table {
@Input() isFullTable: boolean;
}
...
child template:
<div *ngIf="isFullTable">
<li *ngFor="let i of collection">{{i}}</li>
</div>
<div *ngIf="!isFullTable">
<li *ngFor="let i of collection | slice:0:3">{{i}}</li>
</div>
With your openFullTable() method, you can change the value of boolean attribute isFullTable. It should change the value in the child component and trigger the tables shown.
Il saisit simplement que "isFullTable" est indéfini
désolé, il devrait dire [isFullTable] = 'isFullTable'. Je l'ai corrigé.