css - 单击 Angular 2 时如何调整表格或 div 的大小？

Question

有谁知道如何在单击按钮或 Angular 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>

Answer 1

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

CSS:

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

.large {
    width: 300px;
}

.small {
    width: 100px;
}

Html，在这里你绑定(bind)到组件中的 large 属性:

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

组件:

export class AppComponent {
    large: boolean = true;

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