Question

我想使用所有带有yarn add use-position标记的元素，并在其周围包装HTML结构，以便表应具有响应性，但是由于某些原因，它无法正常工作。您能告诉我我在做什么错吗，为什么它不起作用？

table

Answer 1

首先不是 AfterContentChecked 。在中应为 ngAfterContentChecked 。但是请使用 ngAfterViewInit 生命周期挂钩代替 ngAfterContentChecked 进行实施。将id属性添加到table并使用 getElementById 代替 getElementsByTagName 。不要一次设置table-responsive类。首先创建div元素，然后添加class。

HTML

<div>
  <table id="table" class="table">
      <thead>
        <tr>
          <th scope="col">Name</th>
          <th scope="col">Country</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Sudarshana</td>
          <td>Sri Lanka</td>
        </tr>
      </tbody>
    </table>
</div>

TS

  ngAfterViewInit() {
    this.el = document.getElementById('table');
    this.wrapper = document.createElement('div');
    this.wrapper.classList.add('table-responsive');
    this.el.parentNode.insertBefore(this.wrapper, this.el);
    this.wrapper.appendChild(this.el);
  }

StackBlitz Demo

Answer 2

ngAfterContentChecked() {
    const el = document.getElementsByTagName('table');
    this.doItOnce = true;
    if (el.length && this.doItOnce) {
      this.doItOnce = !this.doItOnce;
      for (let i = 0; i < el.length; i++) {
        const element = el.item(i);
        const wrapper = document.createElement('div');
        wrapper.className = 'table-responsive';
        element.parentNode.insertBefore(wrapper, element);
        wrapper.appendChild(element);
      }
    }
  }

无法将HTML结构包装在元素周围

2 个答案: