在 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，因此您可以访问每个表标题的nativeElement(实际的DOM 节点) 并获取每个单独的 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屋！