IE11 未在动态 table 中呈现 DOM 个元素

Question

我运行在使用 Angular 过滤表格数据时在 IE11 上出现奇怪的行为。

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

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

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

问题可能是由于 ng-container 每两行换行造成的，IE 无法正确处理。有解决此问题的想法吗？

Answer 1

不幸的是，

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

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

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

干杯！

IE11 未在动态 table 中呈现 DOM 个元素

IE11 not rendering DOM elements in dynamic table

dom

rendering

html-table

internet-explorer-11

angular