使用Typescript和Angular 4的可擴展選項卡

Question

我有一個簡單的選項卡，在Angular 4項目中使用<td></td>，他返回我解析Json的數據。我希望標籤自動擴展到10行（高度），然後如果我有超過10行，它會在標籤的右側動態添加一個滾動條。根據4個Json對象，我最初有4行，但根據從API返回的數據量可能會增加。如果有人提前拿到ideas..thanks

這裏是我的實際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> 

Answer 1

如果你想使用此代碼與固定的風格，那麼你可以只用CSS解決這個問題。在這種情況下，您必須添加僅適合10行和overflow-y: scroll的max-height。所以如果你將有超過10行滾動將出現。