Question

我在Angular2组件中有以下内容：

<div ng-if="heading" [innerHTML]="heading"></div>

Chrome＆amp; Safari工作正常 - 但IE在DIV中显示null。我不明白为什么......标题是undefined，经过双重检查！

Answer 1

Angular2中的正确语法应为

<div *ngIf="heading" [innerHTML]="heading"></div>

Answer 2

对于那些不想在内部HTML可能未定义的情况下必须执行ngIf的人，这里有一个解决方案可以在您的应用中解决此问题：

constructor(sanitize: DomSanitizer) {
    // override the sanitize method so that it returns an empty string instead of null so that IE doesn't show "null" in the DOM
    sanitize.sanitize = function(context: SecurityContext, value: SafeValue | string | null) {
        return (sanitize as any).__proto__.sanitize.call((sanitize as any), context, value) || '';
    };
}

我把它放在app.module构造函数中。

您可能会问，＆＃34;为什么会采用这种hacky方式？＆＃34;这主要是因为DomSanitizer是一个充当类的接口。真正的清理工作发生在未公开暴露的DomSanitizerImpl类中。

Answer 3

*ngIf

<div *ngIf="heading" [innerHTML]="heading"></div>

Answer 4

Angular2 NgIf语法：

<div *ngIf="condition">...</div>
<div template="ngIf condition">...</div>
<template [ngIf]="condition"><div>...</div></template>

示例：

<div *ngIf="errorCount > 0" class="error">
  <!-- Error message displayed when the errorCount property in the current context is greater than 0. -->
  {{errorCount}} errors detected
</div>

Angular2在IE中显示为null

4 个答案: