Использование * ngIf для изменения только div, окружающего тот же контент

Question

Я пытаюсь создать другой div, который будет всегда окружать один и тот же контент.Тем не менее, я не могу создать дублированный контент, так как есть вход внутри div, и он выдает ошибку, говорящую «этот идентификатор уже используется»

Я попытался сделать это:

<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, добавив директивы (егоединственное, что меняется) вместо того, чтобы дублировать контент и выдавать мне эту ошибку

я получаю ошибку: идентификатор уже используется.

Может кто-нибудь мне помочь?

Answer 1

Вы можете ограничить повторное использование идентификатора и предотвратить эту ошибку, используя ngIfElse в другом ng-шаблоне. Пример из angular.io документации :

<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 только тогда, когда ваше условие истинно. Вы можете упростить свой код, привязав нулевое значение, если оно ложно, к целевому атрибуту . В приведенном ниже примере используется троичный оператор, но вы можете очистить этот код еще дальше, переместив соответствующую тернарную операцию каждого атрибута в метод на стороне компонента (например, 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>

---

[Редактировать] Я знаю, что это должен быть комментарий, но у меня недостаточно репутации:)