如何在表中具有特定数量的行

Question

我有一张包含人员列表的表格。我使用* 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>

表格的每一行都是一个人。让我们说我只想在表格中看到10行。让我们说列表中的人数是5人，其余5行将是空白但仍然可见。如果列表中的人员大于10，则表格将超过/可滚动。基本上这是我想要实现的。

Answer 1

这是您的期望

@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);
      }
  }
  }
}

处理css中的滚动

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

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

如果您需要任何解释，请告诉我

<强> LIVE DEMO