Question

我正在尝试创建始终围绕相同内容的另一个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，它接受一个变量（真或假），并根据它具有不同的指令，由下面的x，y表示。

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

我希望能够创建一个动态条件，使其仅适用于周围的div包装器，添加指令（这是唯一会更改的内容），而不是复制内容并向我抛出此错误

我得到的错误是：ID已在使用中。

有人可以帮助我吗？

Answer 1

您可以通过在另一个ng-template中使用ngIfElse来限制id重用并防止出现此错误。来自angular.io documentation的示例：

<div *ngIf="condition; else elseBlock">Content to render when condition is true.</div>
<ng-template #elseBlock>Content to render when condition is false.</ng-template>

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

<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绑定到target attribute时将null值绑定来简化代码。下面的示例使用三元运算符，但是您可以通过将每个属性的相应三元运算移到组件方方法中来进一步清理此代码（例如：getXValue（）：number | null）。

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

Answer 2

能否请您发布一些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>

[编辑]我知道这必须是评论，但我的声誉不够：）

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

2 个答案: