Javascript 使用*ngIf仅更改围绕相同内容的div

我试图创建一个不同的div，它总是围绕着相同的内容。但是，我无法创建重复的内容，因为div中有一个输入，它会抛出一个错误，说“此id已在使用”

我试着这样做：

<div *ngIf="true" x="" y="" ngClass=[example]>
    <input id="{{ aux }}"/>
</div> 

然后为另一个案例创建另一个div：

<div *ngIf="false" ngClass=[example]>
    <input id="{{ aux }}"/>
</div>

因此，我试图实现的是：

正如我之前所展示的，我有一个div，它接受一个变量（true或false），根据它的不同，它将有不同的指令，由下面的x，y表示

<div ngIf="true" x="" y="" ngClass=[example]>
    //same content
</div>
<div ngIf="false" ngClass=[example]>
    //same content
</div>

//相同内容
//相同内容

我希望能够创建一个动态条件，只应用于周围的div包装器，添加指令（这是唯一改变的事情），而不是复制内容并向我抛出这个错误

Im获取的错误是：id已在使用中

---

有人能帮我吗？

你能发布一些你的html代码和TS组件代码吗？我认为您不能只更改包装器，您可以更改整个div及其内部组件

---

您的html中有不正确的语法，因为您需要这样编写ngClass：

<!--You need-->
<div *ngIf="false" [ngClass]="example (object, string or array from ts or statically defined in html)">
    <!--some code-->
</div>
<!--or-->
<div *ngIf="false" ngClass="example (string)">
    <!--some code-->
</div>
<!--or-->
<div *ngIf="false" class="{{example (object, string or array from ts or statically defined in html)}}">
    <!--some code-->
</div>
<!--You wrote-->
<div *ngIf="false" ngClass=[example] (incorrect syntax)>
    <!--some code-->
</div>

---

---

[编辑]我知道这一定是一条评论，但我没有足够的声誉：）

您可以通过在另一个ng模板中使用ngIfElse来限制id重用并防止此错误。例如：

条件为真时要渲染的内容。
条件为false时要渲染的内容。

特定于您的用例，代码将是：

<div ngIf="true; else falseTemplate" x="" y="" ngClass=[example]>
    //same content
</div>
<ng-template #falseTemplate>
    <div ngClass=[example]>
    //same content
    </div>
</div>

//相同内容
//相同内容

但是，仔细检查后，似乎只希望在条件为真时提供x和y的属性值。当为false时，可以通过将null值绑定到。下面的示例使用了三元运算符，但您可以通过将每个属性各自的三元运算移动到组件端方法（例如：getXValue（）：number | null）来进一步清理此代码

//相同内容

<div ngIf="true; else falseTemplate" x="" y="" ngClass=[example]>
    //same content
</div>
<ng-template #falseTemplate>
    <div ngClass=[example]>
    //same content
    </div>
</div>

<div [attr.x]="true ? '' : null" [attr.y]="true ? '': null" ngClass=[example]>
    //same content
</div>