Я использую угловой аккордеон. Он отобразит аккордеоны на основе размера объекта в (ng-repeat). Когда я нажимаю заголовок Аккордеона, он должен сделать вызов api и сохранить результат в переменной (детали отдела), и он должен отображаться в расширенном окне аккордеона.
Когда я нажимаю первый Аккордеон, он вызывает вызов API и корректно отображает данные в окне Аккордеона. Но, когда я нажимаю второй Аккордеон, он делает api-вызов, и теперь данные в обоих аккордеонах (первый и второй) одинаковы, поскольку переменная детали отдела имеет результат второго вызова api-аккордеона.
Как я могу отображать данные, уникальные для каждого аккордеона?. Должен ли я делать все вызовы api в самих контроллерах, хранить результаты в массиве и использовать его в html вместо вызова api только тогда, когда я нажимаю заголовок Accordion. Заранее спасибо.
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;
});
}
ваша проблема в том, что Ctrl.departmentdetails - это одно строковое значение, которое вы используете в каждом разделе вашего ng-repeat. ваш текущий проект просто обновляет значение одной переменной, которая повторяется много раз. Ctrl.departmentdetails имеет мало общего с вашим ng-repeat, и это ваша проблема. Прямо сейчас у вас есть такая же строка, связанная со многими местами в вашем представлении, и когда вы делаете getinfo(), вы просто обновляете одну строку, которая затем будет обновлять ее везде, где она появляется в вашем html.
ваша функция getinfo (item) должна взять объект item, а не только идентификатор в качестве аргумента, а затем он установит элементы deldails на объект объекта, который вы передадите ему. это позволит каждому элементу иметь свои собственные данные отдела.
вам нужно сделать getinfo() добавить свойство departmentdetails к вашему объекту объекта, когда вы делаете запрос api, или же привязать его к другому массиву, который можно использовать в качестве источника данных для вашего представления.
и измените свой html на что-то вроде этого или что-то, что относится к массиву данных данных отдела, которые собираются, когда ваш пользователь расширяет каждый раздел.
<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>