如何在Angular 2中單擊時調整表格或div的大小？

Question

有沒有人知道如何調整一個表或div時，點擊一個按鈕或角2的某處？ 我試圖調整一個表格寬度：300px到100px，當點擊一個使用CSS和typescript的函數時。

table{ 
 
    width: 300px; 
 
    resize: horizontal; 
 
    border: 2px solid; 
 
}

doResize(): void { 
 
     document.getElementById("table").style.resize = "100px horizontal"; 
 
    }

HTML

<div class="resizeTable"> 
 
     <table id="table"> 
 
     <thead> 
 
      <tr> 
 
      <th>Id</th> 
 
      <th>Name</th> 
 
      <th>Price($)</th> 
 
      </tr> 
 
     </thead> 
 
     <tbody> 
 
      <tr> 
 
      <td>BH12</td> 
 
      <td>Shirt</td> 
 
      <td>300</td> 
 
      </tr> 
 
     </tbody> 
 
     </table> 
 
    </div> 
 
<button click="doResize()"> Rezise </button>

Answer 1

最簡單的就是在你的組件中使用一個屬性來設置一個css類。這裏就是財產在你的分量大是用來控制類用於您的表的例子：

CSS：

table { 
    resize: horizontal; 
    border: 2px solid; 
} 

.large { 
    width: 300px; 
} 

.small { 
    width: 100px; 
} 

的Html，在這裏你綁定到你的組件屬性大：

<table id="table" [class.large]="large" [class.small]="!large"> 
</table> 

組件：

export class AppComponent { 
    large: boolean = true; 

    doResize(): void { 
     this.large = false; 
    } 
}