Angular 8/9：如何使用插值設置 data-parent 屬性？

Question

假設我有一個帶有兩個按鈕的可折疊菜單，單擊時將顯示其相應的內容。 如果打開了一個，則單擊另一個按鈕時它應該關閉。 我想重復這個內容 x 次。

 <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>

我希望每個帶有 class container的divs都有自己的唯一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

您應該使用 [attr.data-parent] 來設置數據父屬性。

在你的情況下 [attr.data-parent] =" '#myGroup' + i"

Answer 2

改用attribute綁定語法

例如

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

你也可以檢查條件我給你一個示例鏈接

如何在 Angular 2 中添加條件屬性？