在 Angular 2 中单击时如何调整表格或 div 的大小？答案

【问题标题】：How can I resize a table or div when clicking in Angular 2?在 Angular 2 中单击时如何调整表格或 div 的大小？
【发布时间】：2018-01-09 08:48:33
【问题描述】：

有没有人知道如何在单击按钮或角度 2 的某个位置时调整表格或 div 的大小？当单击使用 CSS 和 typescript 的函数时，我试图调整表格宽度：300px 到 100px。

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>

【问题讨论】：

标签： css typescript html-table angular2-template

【解决方案1】：

最简单的方法是使用组件中的属性来设置 CSS 类。这是一个示例，其中组件中的属性 large 用于控制将哪个类应用于您的表：

CSS：

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

.large {
    width: 300px;
}

.small {
    width: 100px;
}

Html，在这里你绑定到组件中的属性 large：

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

组件：

export class AppComponent {
    large: boolean = true;

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

【讨论】：