Question

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

＆＃13;

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

＆＃13;

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

＆＃13;

HTML

＆＃13;

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

＆＃13;

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

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

1 个答案: