使用角度组件创建未知数量的可折叠面板

Question

我正在尝试使用未知数量的可折叠面板填充手风琴。每个面板都包含类似的数据，因此我创建了一个如下所示的组件：

import {Component, Input} from "@angular/core";
import {RecipeBook} from "../../models/recipeBook";

@Component({
    selector: 'recipe-book-panel',
    templateUrl: './recipe-book-panel.component.html',
    styleUrls: ['./recipe-book-panel.component.css']
})
export class RecipeBookPanelComponent {
    @Input() recipeBook: RecipeBook;
}

它有一个看起来像这样的模板：

<div class="panel panel-default">
    <div class="panel-heading" data-toggle="collapse" [attr.href]="'#' + recipeBook.name">
        <h4 class="panel-title">
            <a>{{recipeBook.name}}</a>
        </h4>
    </div>
    <div id="recipeBook.name" class="panel-collapse collapse">
        <div class="panel-body">
            ...
        </div>
    </div>
</div>

我在另一个组件中使用ngFor来创建尽可能多的面板，如下所示：

<div class="panel-group" id="accordion">
    <div *ngFor="let book of recipeBooks">
        <recipe-book-panel [recipeBook]="book"></recipe-book-panel>
    </div>
</div>

除了可折叠功能不存在外，所有内容都已成功填充。单击面板标题不会执行任何操作。我知道问题是[attr.href]，但我不知道如何正确插入href值。大多数在线问题只使用硬编码字符串。