带有Typescript和Angular 4的可扩展选项卡(Extendable tab with Typescript and Angular 4)

带有Typescript和Angular 4的可扩展选项卡(Extendable tab with Typescript and Angular 4)

我在Angular 4项目中使用<td></td>有一个简单的选项卡，它让我从Json中解析数据。 我希望标签动态扩展到10行（高度）然后如果我有超过10行，它会在标签的右侧动态添加滚动条。 根据4个Json对象，我最初有4行，但它可能会增加，具体取决于从API返回的数据量。 如果有人有想法..谢谢提前

这是我实际的html表的一行：

<table> <tr> <td *ngFor="let user2 of userService2.users2 | async"> <span *ngIf="user2?.data.details[3].elt_state_id === 1"> <img src="./assets/img/icones_sized/cloud_small.png"/> </span> <span *ngIf="user2?.data.details[3].elt_state_id > 1"> <img src="./assets/img/icones_sized/storm_small.png"/> </span> <span *ngIf="user2?.data.details[3].elt_state_id < 1"> <img src="./assets/img/icones_sized/sun_small.png"/> </span> <span [style.color]="['black', 'orange', 'red'][user2?.data.details[3].state_id]">{{user2.data.details[3].elt_label}} </span> </td> <td *ngFor="let user2 of userService2.users2 | async">{{user2.data.details[3].elt_type_label}}</td> <td *ngFor="let user2 of userService2.users2 | async">{{user2.data.details[3].elt_state}}</td> <td *ngFor="let user2 of userService2.users2 | async">{{user2.data.details[3].elt_since}}</td> </tr> </table>

I have simple tab using <td></td> in Angular 4 project who's returning me parsing data from a Json. I would like the tab extend himself dynamically until 10 lines (height) and then if I have more than 10 lines it dynamically add a scroll bar on the right side of the tab. I have initially 4 lines according to the 4 Json objects but it could increase depending on the datas quantity returning from the API. If anyone got ideas..thanks in advance

here's one line of my actual html table:

<table> <tr> <td *ngFor="let user2 of userService2.users2 | async"> <span *ngIf="user2?.data.details[3].elt_state_id === 1"> <img src="./assets/img/icones_sized/cloud_small.png"/> </span> <span *ngIf="user2?.data.details[3].elt_state_id > 1"> <img src="./assets/img/icones_sized/storm_small.png"/> </span> <span *ngIf="user2?.data.details[3].elt_state_id < 1"> <img src="./assets/img/icones_sized/sun_small.png"/> </span> <span [style.color]="['black', 'orange', 'red'][user2?.data.details[3].state_id]">{{user2.data.details[3].elt_label}} </span> </td> <td *ngFor="let user2 of userService2.users2 | async">{{user2.data.details[3].elt_type_label}}</td> <td *ngFor="let user2 of userService2.users2 | async">{{user2.data.details[3].elt_state}}</td> <td *ngFor="let user2 of userService2.users2 | async">{{user2.data.details[3].elt_since}}</td> </tr> </table>

最满意答案

如果要将此代码用于固定样式，则只需使用CSS即可解决此问题。 在这种情况下，您必须添加仅适合10行和overflow-y: scroll max-height overflow-y: scroll 。 因此，如果您将有超过10行，则会出现滚动。

If you want to use this code with fixed styles, then you can solve this problem using only CSS. In that case you have to add max-height that will fit only 10 lines and overflow-y: scroll. So if you will have more than 10 lines scroll will appear.