Angular 8/9: как установить атрибут data-parent с интерполяцией?

Question

Допустим, у меня есть складное меню с двумя кнопками, которое будет отображать соответствующее содержимое при нажатии. Если один из них открыт, он должен закрываться при нажатии другой кнопки. Я хочу повторить это содержание х раз.

<div *ngFor="let item of array; let i = index" class="container" id="myGroup">
    <p>
        <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
            content 1
        </a>
        <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample2" aria-expanded="false" aria-controls="collapseExample2">
            Content 2
        </button>
    </p>

    <div class="collapse" id="collapseExample" data-parent="#myGroup">
        <div class="card card-body">
            Content 1 here 
        </div>
    </div>
    <div class="collapse" id="collapseExample2" data-parent="#myGroup">
        <div class="card card-body">
            Content 2 here 
        </div>
    </div>
</div>

Я хочу, чтобы каждый из divs с классом container имел свой уникальный id, соответствующий его атрибуту data-parent его содержимого. Примерно так:

<div *ngFor="let item of array; let i = index" class="container" id="myGroup{{i}}">
    <p>
        <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
            content 1
        </a>
        <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample2" aria-expanded="false" aria-controls="collapseExample2">
            Content 2
        </button>
    </p>

    <div class="collapse" id="collapseExample" data-parent="#myGroup{{i}}">
        <div class="card card-body">
            Content 1 here 
        </div>
    </div>
    <div class="collapse" id="collapseExample2" data-parent="#myGroup{{i}}">
        <div class="card card-body">
            Content 2 here 
        </div>
    </div>
</div>

Моя цель - создать пару кнопок, которые я могу печатать на странице x раз. Каждый раз, когда новый набор печатается на странице, его кнопки будут реагировать только на уникальные id с и data-parent с. Я попробовал это так же, как я включил выше, но получил следующую ошибку: Uncaught Error: Template parse errors: Can't bind to 'parent' since it isn't a known property of 'div'.

Возможно ли это вообще? Любая помощь приветствуется.

Answer 1

Используйте attribute привязку синтаксис вместо

Например

[attr.data-parent]="'#myGroup' + i"

, и вы также можете проверить с условием, что я даю вам пример ссылки

Как добавить условный атрибут в Angular 2?

Answer 2

Вы должны использовать [attr.data-parent] для установки атрибута data-parent.

в вашем случае [attr.data-parent] = "'#myGroup' + i"