Angular 让我的手风琴动态响应？

我创建了一个accordion组件，它动态地填充父组件提供的值。我无法做到的是，每个手风琴都应该对各自的咔嗒声做出反应。目前，无论我点击哪个手风琴，它只会折叠并展开第一个。这是我的密码：

数组父.component.ts

import { Component, AfterViewInit, OnInit } from '@angular/core';

@Component({
    selector: 'my-array-parent',
    templateUrl: './array-parent.component.html',
})
export class ArrayParentComponent implements OnInit {
    private content: Test[];

    ngOnInit(): void {
        this.content = [{
            heading: 'header1',
            testData: [{
                title: 'title1',
                content: 'content1'
            }, {
                title: 'title2',
                content: 'content2'
            }]
        }, {
            heading: 'header2',
            testData: [{
                title: 'title1',
                content: 'content1'
            }, {
                title: 'title2',
                content: 'content2'
            }]
        }]
    }
}

export class Test {
    heading: string;
    testData: TestItem[];
}

export class TestItem {
    title: string;
    content: string;
}

import { Component, Input, OnInit, AfterViewInit } from '@angular/core';

@Component({
    selector: 'my-array',
    templateUrl: './array.component.html'
})

export class ArrayComponent implements OnInit {

    @Input() data: any;

    private contentObj: any;

    constructor() { }

    ngOnInit(): void {
        this.contentObj = this.data;
    }
}

数组parent.component.html

<ng-container *ngFor="let item of content">
    <my-array [data]="item"></my-array>
</ng-container>

<h2>{{contentObj.heading}}</h2>
<div class="columnOne" id="accordion" role="tablist" aria-multiselectable="true">
    <div *ngFor="let item of contentObj.testData;">
        <div role="tab" id="headingone">
            <h4>
                <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseone" aria-expanded="true" aria-controls="collapseone">
                    {{item.title}}
                </a>
            </h4>
            <div id="collapseone" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingone">
                <div class="panel-body">
                    {{item.content}}
                </div>
            </div>
        </div>
    </div>
</div>

array.component.html

<ng-container *ngFor="let item of content">
    <my-array [data]="item"></my-array>
</ng-container>

<h2>{{contentObj.heading}}</h2>
<div class="columnOne" id="accordion" role="tablist" aria-multiselectable="true">
    <div *ngFor="let item of contentObj.testData;">
        <div role="tab" id="headingone">
            <h4>
                <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseone" aria-expanded="true" aria-controls="collapseone">
                    {{item.title}}
                </a>
            </h4>
            <div id="collapseone" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingone">
                <div class="panel-body">
                    {{item.content}}
                </div>
            </div>
        </div>
    </div>
</div>

{{contentObj.heading}
{{item.content}

---

我真正想做的是，每个手风琴只有在被点击时才会展开和折叠。目前，无论我点击哪个手风琴，只有第一个手风琴会展开和折叠。我知道这是因为它获得了一个静态ID。我尝试了一些可能的选项来为所有字段分配一个动态ID，但没有成功。非常感谢您的帮助。

在数组组件中，您希望输入数组类型，但实际上您传递的是元素而不是数组：

<ng-container *ngFor="let item of content">
          <my-array [data]="item" //Here the item is an object></my-array>
</ng-container>

尝试传递您的阵列：

<ng-container>
      <my-array [data]="content" //Here the item is an object></my-array>
</ng-container>

---

您需要绑定引导依赖的属性以相应地切换div：

是：

• 面板标题：

  id

  ，

  href

  ，

  aria控件

• 面板折叠：

  id

  ，

  aria-labeledby

下面是工作示例的一个片段：

<div class="panel-heading" role="tab" [id]="'heading'+data.id">
    <h4 class="panel-title">
        <a role="button" data-toggle="collapse" data-parent="#accordion" [href]="'#collapse'+data.id" aria-expanded="true" [attr.aria-controls]="'collapse'+data.id">
            {{data.header}}
        </a>
    </h4>
</div>
<div [id]="'collapse'+data.id" class="panel-collapse collapse" role="tabpanel" [attr.aria-labelledby]="'heading'+data.id">
    <div class="panel-body">
        {{data.content}}
    </div>
</div>

{{data.content}

---

请注意，我们必须在aria属性前面加前缀，因为它们不是

&

的本机属性，谢谢大家的帮助@Zze我进一步利用了你的想法，得到了我想要的东西。这是我的代码，按照我的要求运行。在我的例子中，我有多个标题和多个手风琴对象

this.content = [{
            heading: 'header1ds kfgdskg',
            id: 1,
            testData: [{
                title: 'title1 ds;olfhsdjkl',
                content: 'content1 sdkjfhdskj'
            }, {
                title: 'title2 asdlkgkf',
                content: 'content2 dsaghfdsf'
            }]
        }, {
            heading: 'header2 sdfdsfds',
            id: 2,
            testData: [{
                title: 'title1 sdfdsfs',
                content: 'content1 sdygfsdgf'
            }, {
                title: 'title2 bsdfdudtfsd',
                content: 'content2 sdk;fgdsugkft'
            }]
        }]
    }

将我的html代码更改为

<h2>{{contentObj.heading}}</h2>
<div class="columnOne" [id]="'accordion' + contentObj.id" role="tablist" aria-multiselectable="true">
    <div *ngFor="let item of contentObj.testData; let i = index;">
        <div role="tab" [id]="'heading' + contentObj.id">
            <h4>
                <a role="button" data-toggle="collapse" [attr.data-parent]="'#accordion' + contentObj.id"
                   [href]="'#collapse' + contentObj.id + i" aria-expanded="true" [attr.aria-controls]="'collapse' + contentObj.id + i">
                    {{item.title}}
                </a>
            </h4>
            <div [id]="'collapse' + contentObj.id + i" class="panel-collapse collapse in" role="tabpanel" [attr.aria-labelledby]="'heading' + contentObj.id">
                <div class="panel-body">
                    {{item.content}}
                </div>
            </div>
        </div>
    </div>
</div>

{{contentObj.heading}
{{item.content}

您使用的是正确的吗？您可能应该将其添加为标记（与您正在使用的版本相同的标记），并使其在您的问题中更加明显。请查看以下链接，这是我想要的方式，但如果其中任何项目有多个单词或有一个空格，我希望它们位于单独的标题下，则无法使用headings@CodeWarrior

#折叠{{contentObj.heading}{{item.title}

所有这样的操作都是错误的。它需要#折叠为字符串。

'#折叠'+{{contentObj.heading}}{{item.title}}