Wie eine bestimmte Anzahl von Zeilen in der Tabelle

Question

Ich habe eine Tabelle, die eine Liste von Personen enthält. Ich füllte die Tabelle mit * ngfor.

<tbody> 
    <tr *ngFor="let person of people (click)="addThisPersonToArray(person)" [class.active]="isPersonSelected(person)"> 
     <td>{{person.id}}</td> 
     <td>{{person.firstName}}</td> 
     <td>{{person.lastName}}</td> 
    </tr> 

Jede Zeile der Tabelle ist eine Person. Nehmen wir an, ich möchte nur 10 Zeilen in der Tabelle sichtbar sein. Nehmen wir an, die Anzahl der Personen in der Liste beträgt 5 Personen. Die restlichen 5 Zeilen sind leer, aber für die Ansicht immer noch sichtbar. Wenn Personen in der Liste größer als 10 sind, wird die Tabelle überblendbar/scrollbar. Grundsätzlich möchte ich das erreichen. Hier

Answer 1

ist, was Ihre Erwartung

@Component({ 
    selector: 'my-app', 
    template: ` 
    <div> 
    <table class="table1"> 
    <tr *ngFor="let person of people" (click)="addThisPersonToArray(person)"> 
     <td>{{person.first_name}}</td> 
    </tr> 

    </table> 
    <div style="max-height:100px;overflow:scroll"> 
    <table class="second-case"> 
    <tr *ngFor="let person of second" (click)="addThisPersonToArray(person)"> 
     <td>{{person.first_name}}</td> 
    </tr> 
    </table> 
    </div> 
    </div> 
    `, 
}) 
export class App { 
    name:string; 
    people:any[]=[{"first_name":"Sara"},{"first_name":"Harry"},{"first_name":"Eugene"},{"first_name":"Julia"},{"first_name":"Barbara"}]; 
    second:any[]=[{"first_name":"Frank"},{"first_name":"Harry"},{"first_name":"Joshua"},{"first_name":"Julia"},{"first_name":"Louis"},{"first_name":"Patrick"},{"first_name":"Paul"},{"first_name":"Joyce"},{"first_name":"Brenda"},{"first_name":"Joshua"},{"first_name":"Jerry"},{"first_name":"Janet"},{"first_name":"Nicholas"},{"first_name":"Janet"},{"first_name":"Julia"}]; 
    constructor() { 
    if(this.people.length<10){ 
     let temp = {"first_name": ""}; 
     for(let i=this.people.length; i<10; i++){ 
     let temp = {"first_name": ""}; 
     this.people.push(temp); 
     } 
    } 
    } 
} 

Umgang mit der Schriftrolle in css

tr td{ 
    border : 1px solid blue; 
} 
.table1 tr td{ 
    height :20px; 
} 

.second-case { 
    height:80px; 
    overflow-y:scroll; 
} 

Lassen Sie mich wissen, wenn Sie irgendwelche Erklärungen benötigen

LIVE DEMO