在Angular 5上动态更改元素宽度 [英] Change element width dynamically on Angular 5

问题描述

我有两个桌子.

我想将一个表的列的宽度设置为等于另一表的列的宽度.

I want to set the width of the column of one table to equal the width of the column of another table.

喜欢这个:

    <table class="table-header table">
        <thead class="table-bordered">
          <tr>
              <th>Name</th>
              <th>Last Name</th>
              <th>Gender</th>
              <th>Education</th>
            </tr>
        </thead>
      </table>

另一个表:

          <table class="table-header table">
         <thead class="table-bordered">
          <tr>
              <th>Name</th>
              <th>Last Name</th>
              <th>Gender</th>
              <th>Education</th>
            </tr>
        </thead>
      <tbody> 
         <tr> 
            <td> Ross </td>
             <td> Ross </td>
            <td> M</td>
            <td> BsC </td>
        ..
      </tbody>

我想做的是让第一张表的所有标题始终等于第二张表的标题宽度. 因为在第二张表上，它们会根据内容调整大小.

What I want to do is have all the headers of the first table to always equal the headers width of the second table. Because on the second table they get resized based on the content.

所以我知道我可以添加一个HostListener('window:resize') 但是如何在Angular中分配这些值? 这样它们总是一样的.好像是彼此的重复. 有指导吗?

So I know I can add a HostListener('window:resize') But how do I assign these values in Angular ? So that they're always the same. As if it's a duplicate of one another. Any guidance?

推荐答案

首先，您需要获取源表列和目标表列的引用，您可以使用模板变量和@ViewChildren装饰器来实现此目的.

First you need to get a reference of your source table columns and your target table columns, you can do this with a template variables and the @ViewChildren decorator.

在您的模板中:

<!-- Source table -->
<table class="table-header table">
  <thead class="table-bordered">
    <tr>
        <th #sourceTh>Name</th>
        <th #sourceTh>Last Name</th>
        <th #sourceTh>Gender</th>
        <th #sourceTh>Education</th>
      </tr>
  </thead>
</table>

<!-- Target table -->
<table class="table-header table">
  <thead class="table-bordered">
    <tr>
      <th #targetTh>Name</th>
      <th #targetTh>Last Name</th>
      <th #targetTh>Gender</th>
      <th #targetTh>Education</th>
    </tr>
  </thead>
  <tbody>
    <!-- table body content -->
  </tbody>
</table>

然后在组件类内部

@Component({ ... })  
export class MyClass {
  @ViewChildren('sourceTh')
  sourceTh: QueryList<ElementRef>;

  @ViewChildren('targetTh')
  targetTh: QueryList<ElementRef>;

  // ...
}

这样，您可以获得元素引用的QueryList，因此您可以访问每个表标题(实际的DOM节点)的nativeElement并获取每个单独的offsetWidth.注意，@ViewChild和@ViewChildren装饰的属性仅在AfterViewInit生命周期挂钩之后可用. QueryList是类似数组的数据结构，它具有一些数组方法，例如forEach，map等...

This way you can get a QueryList of elements references, so you can access the nativeElement of each table heading (the actual DOM Nodes) and get each individual offsetWidth. Notice @ViewChild and @ViewChildren decorated properties are only available after the AfterViewInit lifecycle hook. A QueryList is an array-like data structure and it has some array methods like forEach, map, etc...

在ngAfterViewInit内部，您要遍历源表标题单元格的列表，获取每个宽度，然后遍历目标标头单元格列表并设置宽度.为此，可以使用Renderer2中的setStyle方法.然后，您也可以在window.resize事件或其他任何情况下调用此方法

Inside ngAfterViewInit you want to iterate over the list of source table header cells, get each one width and then iterate over target header cell list and set the width. For this, you can use the setStyle method from Renderer2. Then you can call this method also on window.resize event or whatever

@Component({ ... })  
export class MyClass implements AfterViewInit {
  @ViewChildren('sourceTh')
  sourceTh: QueryList<ElementRef>;

  @ViewChildren('targetTh')
  targetTh: QueryList<ElementRef>;

  constructor( private renderer: Renderer2 ) {}

  ngAfterViewInit() {
    this.resizeColumns();
  }

  resizeColumns() {
    let widths = this.sourceTh.map(th => th.nativeElement.offsetWidth);

    this.targetTh.forEach((th, index) => {
      this.renderer.setStyle(
        th.nativeElement, 
        'width', 
        `${widths[index]}px`
      );
    });
  }
}

这篇关于在Angular 5上动态更改元素宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！