Question

我正在使用角度手风琴。它将根据（ng-repeat）中的对象大小显示手风琴。当我点击手风琴标题时，它应该进行api调用并将结果存储在变量（部门详细信息）中，并且应该显示在手风琴的Expanded窗口中。

当我单击第一个Accordion时，它正在进行API调用并在Accordion窗口中正确显示数据。但是，当我点击第二个手风琴时，它正在进行api调用，现在手风琴（第一个和第二个）中的数据是相同的，因为部门细节变量具有第二个手风琴api调用的结果。

如何显示每支手风琴的独特数据？我应该在控制器本身中进行所有api调用，将结果存储在数组中，并在html中使用它，而不是仅在我单击Accordion-heading时才进行api调用。在此先感谢。

HTML：

<accordion close-others="false">
    <accordion-group is-open="isopen" ng-repeat="item in object">
        <accordion-heading">
            <span ng-click="Ctrl.getinfo(item.id)">
                {{item.label}}
            </span>
        </accordion-heading>
        <div> 
            {{Ctrl.departmentdetails}}
        </div>
     </accordion-group>
</accordion>

控制器：

public getinfo (departmentid): void {
    this.departmentdetails = null;
    this.services.getdepartmentdetails(departmentid).then((response):any=>{
        this.departmentdetails= response;
    });
}

Answer 1

你的问题是Ctrl.departmentdetails是你在ng-repeat的每个部分中使用的一个字符串值。您当前的设计只更新一个重复多次的变量的值。 Ctrl.departmentdetails与你的ng-repeat几乎没有关系，那就是你的问题。现在你有相同的字符串绑定到视图中的许多地方，当你执行getinfo（）时，你只是更新了一个字符串，然后它将更新它在你的html中出现的任何地方。

你的getinfo（item）函数应该采用item对象而不仅仅是id作为参数，然后它会在你传递给它的item对象上设置departmentdetails。这将允许每个项目都有自己的departmentdetails数据。

当你发出api请求时，你需要让getinfo（）为你的item对象添加一个departmentdetails属性，或者把它粘贴在另一个可以用作视图数据源的数组中。

并将您的html更改为类似的内容，或者引用当系统扩展每个部分时收集的departmentdetails数据数组的内容。

<accordion close-others="false">
<accordion-group is-open="isopen" ng-repeat="item in object">
    <accordion-heading">
        <span ng-click="Ctrl.getinfo(item)">
            {{item.label}}
        </span>
    </accordion-heading>
    <div> 
        {{item.departmentdetails}}
    </div>
 </accordion-group>

如何以不同的手风琴方式以角度手风琴显示数据

1 个答案: