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

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，它接受一个变量(true 或 false)，并且根据变量它会有不同的指令，由下面的 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 时的 null 值绑定(bind)到 target attribute 来简化代码。 。下面的示例使用三元运算符，但您可以通过将每个属性各自的三元操作移动到组件端方法中来进一步清理此代码(例如: getXValue() : number | null)。

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