在我正在构建的应用程序中，我有几张卡片使用Bootstrap的 Accordion 进行扩展和折叠。
<div class="accordion" role="tablist" aria-multiselectable="true">
<div class="card">
<div class="card-header" role="tab" id="headingOne">
<h5 class="mb-0">
<a data-toggle="collapse" data-parent=".accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Question?
</a>
</h5>
</div>
<div id="collapseOne" class="collapse show" role="tabpanel" aria-labelledby="headingOne">
<div class="card-block">
<div class="row"><div class="col-3"><figure data-toggle="modal" data-target="#unidadeUm"><img src="./assets/img/unidade1.png" alt="A caixa de busca." width="230"><figcaption>Click to expand.</figcaption></figure></div><div class="col-9"><p>Answer.</p></div></div>
</div>
</div>
</div>
</div>
我需要过滤它们，在Angular 2中，我自然地创建了一个包含答案和问题的数组（用于展开/折叠卡片的链接）。
<div class="accordion" role="tablist" aria-multiselectable="true">
<div class="card" *ngFor="let item of items | search:'item,title':query">
<div class="card-header" role="tab" id="headingOne">
<h5 class="mb-0">
<a data-toggle="collapse" data-parent=".accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
{{item.title}}
</a>
</h5>
</div>
<div id="collapseOne" class="collapse show" role="tabpanel" aria-labelledby="headingOne">
<div class="card-block">
<div class="row"><div class="col-3"><figure data-toggle="modal" data-target="#unidadeUm"><img src="./assets/img/unidade1.png" alt="A caixa de busca." width="230"><figcaption>Click to expand.</figcaption></figure></div><div class="col-9"><p>{{item.desc}}</p></div></div>
</div>
</div>
</div>
</div>
问题，除了ids和classes（第一张卡片有id="headingOne"和class="collapseOne"之外，这些卡片遵循相同的结构有id="headingTwo"和class="collapseTwo"依此类推等等
我尝试通过创建另一个数组对象来替换id和类来解决这个问题，比如
<div class="accordion" role="tablist" aria-multiselectable="true">
<div class="card" *ngFor="let item of items | search:'item,title':query">
<div class="card-header" role="tab" id="{{item.head}}">
<h5 class="mb-0">
<a data-toggle="{{item.collap}}" data-parent=".accordion" href="#{{item.collap}}" aria-expanded="true" aria-controls="{{item.collap}}">
{{item.title}}
</a>
</h5>
</div>
<div id="collapseOne" class="collapse show" role="tabpanel" aria-labelledby="headingOne">
<div class="card-block">
<div class="row"><div class="col-3"><figure data-toggle="modal" data-target="#unidadeUm"><img src="./assets/img/unidade1.png" alt="A caixa de busca." width="230"><figcaption>Click to expand.</figcaption></figure></div><div class="col-9"><p>{{item.desc}}</p></div></div>
</div>
</div>
</div>
</div>
...但是它在控制台中将它返回给我：
Error: Template parse errors:
Can't bind to 'toggle' since it isn't a known property of 'a'.
所以，如果我想让我的手风琴工作，我需要手动插入没有数组的内容，这使得过滤搜索成为不可能（据我所知）。在这种情况下，我认为我有两个选择：
有没有办法做这两个中的任何一个？
提前致谢。
我现在使用固定的Bootstrap 4 for Angular 2，可以找到here。它不能作为数组工作，所以过滤静态项的问题仍然是零级。至少它现在已经过优化。
新工作手风琴代码：
<ngb-accordion [closeOthers]="true" activeIds="static-1">
<ngb-panel id="static-1" title="Simple">
<ng-template ngbPanelContent>
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia
aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor,
sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica,
craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings
occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus
labore sustainable VHS.
</ng-template>
</ngb-panel>
<ngb-panel id="static-2" title="Title">
<ng-template ngbPanelContent>
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia
aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor,
sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica,
craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings
occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus
labore sustainable VHS.
</ng-template>
</ngb-panel>
<ngb-panel id="static-3" title="Title 2">
<ng-template ngbPanelContent>
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia
aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor,
sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica,
craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings
occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus
labore sustainable VHS.
</ng-template>
</ngb-panel>
</ngb-accordion>