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

【问题标题】：Using *ngIf to change only the div surrounding the same content使用 *ngIf 仅更改围绕相同内容的 div
【发布时间】：2019-10-28 12:47:19
【问题描述】：

我正在尝试创建一个始终围绕相同内容的不同 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 已在使用中。

谁能帮帮我？

【问题讨论】：

标签： javascript html angular angular6

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

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

【讨论】：