[英]How to accordion with *ngFor in angular 8
我正在尝试使用 *ngFor 和引导手风琴创建手风琴的动态层次结构。
这是我的代码...
<div class="container" style="color:black;">
<div id="accordion">
<div class="card">
<div class="card-header" id="headingOne">
<h5 class="mb-0 d-inline">
<button type="button" class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Available Namespaces
</button>
</h5>
<a href="#" data-target="[data-parent='#child1']" data-toggle="collapse" class="my-2 float-right">toggle all</a>
</div>
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
<div class="card-body" id="child1">
<div class="card" *ngFor="let name of namespaces">
<div class="card-header">
<a href="#" data-toggle="collapse" data-target="#collapseOneA">{{name}}</a>
</div>
<div class="card-body collapse" data-parent="#child1" id="collapseOneA">
{{name}}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
ngFor 中的命名空间使用 rest API 调用来获得它的价值。 我在那里验证了一个包含两个值的字符串数组。
public namespaces: string[] = [];
ngOnInit() {
const credentials = environment.ouathClientId + ':' + environment.oauthClientSecret;
this.httpclient
.get<string[]>(this.namespaceApi, {
headers: new HttpHeaders({
'Content-Type': 'application/json;charset=utf-8',
Authorization: 'Basic ' + btoa(credentials)
})
})
.subscribe(
(data) => {
this.namespaces = data;
},
(error) => {
alert(error.error.message);
}
);
}
但仍然没有在手风琴中显示值。 任何建议...
也许您的数据是在加载 html 组件之后出现的,这可能是原因之一。 您可以像这样在代码中添加 *ngIf="namespaces" :
<div class="container" style="color:black;" *ngIf="namespaces">
<div id="accordion">
<div class="card">
<div class="card-header" id="headingOne">
<h5 class="mb-0 d-inline">
<button type="button" class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Available Namespaces
</button>
</h5>
<a href="#" data-target="[data-parent='#child1']" data-toggle="collapse" class="my-2 float-right">toggle all</a>
</div>
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
<div class="card-body" id="child1">
<div class="card" *ngFor="let name of namespaces">
<div class="card-header">
<a href="#" data-toggle="collapse" data-target="#collapseOneA">{{name}}</a>
</div>
<div class="card-body collapse" data-parent="#child1" id="collapseOneA">
{{name}}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
我希望这将有所帮助。
我相信您需要将 *ngFor 放在元素中更高的位置才能正确显示。 此外,对数据目标和id的引用必须是唯一的,这可以通过使用循环的索引来解决。 因此,您可以尝试以下操作,而不是将您的卡嵌套在轮播中的另一张卡中:
<div class="accordion" id="accordionExample">
<div class="card" *ngFor="let name of namespaces; index as i">
<div class="card-header" id="headingOne">
<h2 class="mb-0">
<button class="btn btn-link" type="button" data-toggle="collapse" attr.[data-target]="'collapse' + i">
Collapsible Group Item {{i}}
</button>
</h2>
</div>
<div [id]="'collapse' + i" class="collapse show" data-parent="#accordionExample">
<div class="card-body">
{{name}}
</div>
</div>
</div>
</div>
另一种选择是使用 ng-bootstrap,这是一个支持引导原生元素的库。 查看 官方的 ng-bootstrap 手风琴
由于您的命名空间只是一个字符串数组而不是任何树结构,因此不会有任何层次结构。 您只需要使用ngFor
遍历数组。 使用迭代索引来映射 id,因为它必须是唯一的。
<div id="accordion">
<div class="card" *ngFor="let namespace of namespaces;let i=index">
<div class="card-header">
<h5 class="mb-0 d-inline">
<button type="button" class="btn btn-link" data-toggle="collapse" attr.data-target="#collapse_{{i}}">
Toggle
</button>
</h5>
</div>
<div id="collapse_{{i}}" class="collapse" data-parent="#accordion">
<!-- content -->
</div>
</div>
</div>
在折叠时删除显示 class 否则它将在启动时切换所有折叠。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.