Html 根据条件在模板中添加中间元素

我正在处理一个我无法修改的CSS，我需要在一个条件下包装一个元素，如果条件没有得到验证，我需要删除包装

换句话说，如果条件得到验证，我希望输出为：

<div class="wrapper">
  <my-component></my-component>
</div>

否则，这：

<my-component></my-component>

我不能仅仅删除包装器类，因为它会破坏一些CSS规则，而且我不能使用display:contents；因为它与IE不兼容

如何解决此问题？

尝试以下方法：

<div class="wrapper" *ngIf="condition">
      <my-component></my-component>
</div>        
<my-component *ngIf="!condition"></my-component>

试试这个：

<div class="wrapper" *ngIf="condition">
      <my-component></my-component>
</div>        
<my-component *ngIf="!condition"></my-component>

像这样的

<div [ngClass]="{'wrapper': CONDITION}">
  <my-component></my-component>
</div>

像这样的

<div [ngClass]="{'wrapper': CONDITION}">
  <my-component></my-component>
</div>

---

或者您可以在div上使用：[ngClass]=wrapper:condition这是我脑海中闪现的唯一可行的解决方案。但也许我的例子不好，因为我使用了一个组件，但在我的实际代码中，我有很多元素需要包装，这将导致大量重复的代码！这不是一个合适的解决方案，或者您可以使用[ngClass]=wrapper:condition on the div这是我脑海中闪现的唯一可行的解决方案。但也许我的例子不好，因为我使用了一个组件，但在我的实际代码中，我有很多元素需要包装，这将导致大量重复的代码！不是合适的解决方案您尝试过[ngClass]吗@很抱歉，但我不能删除该类，正如我在问题中所说的，除了可选包装应应用于多个元素的情况外，如果包装中的元素具有不应重复的ID，则该问题也会相关。您尝试过[ngClass]吗@很抱歉，但我不能删除类，正如我在问题中所说的，除了可选包装应用于多个元素的情况外，如果包装中的元素具有不应重复的ID，那么这个问题也很相关。对不起，但我不能删除类，正如我在问题中所说的，对不起，但是，正如我在问题中所说，我不能仅仅取消这个类