我正在尝试使用* ngFor和bootstrap手风琴创建动态的手风琴层次结构。
这是我的代码...
<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);
}
);
}
,但仍然没有手风琴显示值。任何建议...