如何在 Angular 8 中使用 *ngFor 手风琴答案

【问题标题】：How to accordion with *ngFor in angular 8如何在 Angular 8 中使用 *ngFor 手风琴
【发布时间】：2020-03-01 18:50:36
【问题描述】：

我正在尝试使用 *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);
                    }
                );
}

但仍然没有以手风琴形式显示值。任何建议...

【问题讨论】：

与您的问题无关：不要在组件中进行 http 调用。将它放在服务中，然后返回 Observable。将来会让您头疼。
是的，我也在做同样的事情......这里只是为了代码。

标签： angular bootstrap-4 accordion ngfor

【解决方案1】：

也许您的数据是在加载 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>

我希望这会有所帮助。

【讨论】：

【解决方案2】：

我相信您需要将 *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，一个支持引导原生元素的库。见the official ng-bootstrap accordion

【讨论】：

【解决方案3】：

由于您的 namespaces 只是一个字符串数组而不是任何树结构，因此不会有任何层次结构。您只需要使用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>

在折叠时删除显示类，否则它将在开始时切换所有折叠。

【讨论】：