单击 Angular 2 时如何调整 table 或 div 的大小？

Question

有谁知道如何在单击按钮或 angular 2 中的某处时调整 table 或 div 的大小？单击使用 CSS 和打字稿的函数时，我试图将 table 宽度：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 class。这是一个示例，其中组件中的属性 large 用于控制哪个 class 应用于您的 table:

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;
    }
}

单击 Angular 2 时如何调整 table 或 div 的大小？

How can I resize a table or div when clicking in Angular 2?

css

html-table

typescript

angular2-template