IE11 不在动态表中渲染 DOM 元素答案

【问题标题】：IE11 not rendering DOM elements in dynamic tableIE11 不在动态表中渲染 DOM 元素
【发布时间】：2020-03-24 21:53:51
【问题描述】：

在使用 Angular 过滤表格数据时，我在 IE11 上遇到了奇怪的行为。

<ng-container *ngFor="let item of items; trackBy: trackByFn">
    <tr>...</tr>
    <tr *ngIf="showDetails(item)">...</tr>
</ng-container>

当 IE11 中的items 更改（即搜索或过滤数据时）时，某些行无法正确呈现：

正如您在上图中所见，<tr> 元素在那里，它的内容也是如此。绿色行渲染得很好，但红色行显然不是。只要我将鼠标悬停在空行上，它的内容就会再次出现。

这个问题可能是由ng-container 包装每两行引起的，IE 无法正确处理这个问题。有什么想法可以解决这个问题吗？

【问题讨论】：

---------- 这应该有助于尝试以下链接Try this
你的代码在td中有多余的空格吗？如果是，请尝试删除它可能有助于解决 IE 浏览器的此问题。

标签： angular dom html-table rendering internet-explorer-11

【解决方案1】：

很遗憾，删除 <td> 元素中的空格并不能解决问题。但是，我确实设法通过为 Internet Explorer 创建自定义 *ngIf 指令来使其正常工作，这会强制浏览器重新呈现表格：

对于遇到同样问题的人，这里是代码：

import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core';

/**
 * Add the template content to the DOM when the condition is true for IE browsers only.
 */
@Directive({
  selector: '[appIfIE]'
})
export class IfIeDirective {

  private hasView = false;
  private isIE = navigator.userAgent.indexOf('MSIE') !== -1 || navigator.appVersion.indexOf('Trident/') > -1;

  constructor(
    private templateRef: TemplateRef<any>,
    private viewContainer: ViewContainerRef
  ) {}

  @Input() set appIfIE(condition: boolean) {
    if (!this.isIE && !this.hasView) {
      this.createView();
    } else if (this.isIE && condition && !this.hasView) {
      this.createView();
    } else if (this.isIE && !condition && this.hasView) {
      this.clearView();
    }
  }

  createView() {
    this.viewContainer.createEmbeddedView(this.templateRef);
    this.hasView = true;
  }

  clearView() {
    this.viewContainer.clear();
    this.hasView = false;
  }

}

...并在您认为合适的地方应用指令：

<tbody *appIfIE="!loading">

干杯！

【讨论】：