如何在 angular 8 中使用 *ngFor 手风琴

Question

I am trying to create a dynamic hierarchy of accordion using *ngFor and bootstrap accordion.

Here is my code...

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

the namespaces in ngFor is getting it's value using rest API call. I verified there a string array with two values in it.

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);
                    }
                );
}

but still values are not displaying in accordion. Any suggestion...

Answer 1

Maybe your data comes after loading of your html component that might be one reason. You can add *ngIf="namespaces" in your code like this:

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

I hope this will help.

Answer 2

I believe you need to place the *ngFor higher up in the elements for it to be shown correctly. Besides the reference to the data target and id have to be unique, which can be solved by using the index of the loop. So instead of nesting your card in another card in the carousel you could try this:

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

Another option would be to use ng-bootstrap, a library that supports bootstrap native elements. See the official ng-bootstrap accordion

Answer 3

Since your namespaces is just a string array and not any tree structure, there won't be any hierarchy. You just need to iterate over the array using ngFor . Use the iteration index for mapping id since it has to be unique.

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

Remove the show class on collapse or it will toggle all collapse on start.