InnerHTML *ngIf 不起作用 Angular5答案

【问题标题】：InnerHTML *ngIf does not work Angular5InnerHTML *ngIf 不起作用 Angular5
【发布时间】：2018-06-28 09:47:03
【问题描述】：

要在 GIS openlayers 地图上显示弹出窗口，我使用 InnerHtml 属性。如果一个字段是假的，我想隐藏的是 DIV。

看起来 Angular 忽略了我的 ngif 这是我的代码：

this.content.innerHTML = `
      <div style="width: 150px; float: right; font-size: 13px;" *ngIf="!test">
              ${ test } 
      </div> `

我的布尔测试是假的。 ngIf 确实可以与 innerHTML 一起使用吗？

很多

【问题讨论】：

是的，这是真的。您必须编译 HTML，这在 prod 构建中是不可能的，您不想在应用程序中附带模板编译器。如果您在 TypeScript 代码中使用 HTML：有问题。如果您使用innerHTML，通常会出现问题。
stackoverflow.com/questions/50809363/… 的可能重复项

标签： angular innerhtml angular-ng-if

【解决方案1】：

当您使用 innerHTML 时，Angular 不会满足您的 *ngIf

每当您通过 innerHTML 传递某些内容时，Angular 只会渲染该内容，不会像您通过添加 ngIf 事件那样评估该内容中的任何表达式或绑定。

【讨论】：

还有其他方法可以使 *ngif 在弹出窗口中成为可能吗？
只需在分配前检查变量test
你到底是什么意思？

【解决方案2】：

您需要添加和删除如下样式

constructor(private elRef: ElementRef) { 

 this.elRef.nativeElement.querySelector('#showResponsiveNavbarone')
 .classList.remove('visibletrue');

}
 <style>
  .visiblefalse{
  display: none !important;
}
.visibletrue{
 display: block !important;
}

【讨论】：