我在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.
更多推荐
发布评论