Angular - Update Accordion with results
I'm currently trying to update an accordion from a search that returns an array. On the first load, the full set of results are correctly shown from a service. However, when I search I get the correct values in the console but even with ngModel it is not being updated. Any suggestions?
// Snippet of accordion
<ngb-accordion [closeOthers]="true">
<ngb-panel [(ngModel)]="modelData" ngDefaultControl *ngFor="let miller of dataService.data.millers; let millerIndex = index" title="{{ miller.name }} - {{ miller.address }}">
<ng-template ngbPanelContent>
<p>Name: {{ miller.name }}</p>
<p>Address: {{ miller.address }}</p>
<p>
<strong>{{ miller.name }}'s Farms</strong>
</p>
search(farmName: string, millerName: string) {
// service being called and snippet of mapping
const x = this.dataService.data.millers.map(miller => {
this.modelData = x;
// Correctly logs results
console.log(this.modelData);
}
angular ng-bootstrap
edited Nov 22 '18 at 10:34
CornelC
1,425916
asked Nov 22 '18 at 10:17
jmckiejmckie
969
add a comment |
I'm currently trying to update an accordion from a search that returns an array. On the first load, the full set of results are correctly shown from a service. However, when I search I get the correct values in the console but even with ngModel it is not being updated. Any suggestions?
// Snippet of accordion
<ngb-accordion [closeOthers]="true">
<ngb-panel [(ngModel)]="modelData" ngDefaultControl *ngFor="let miller of dataService.data.millers; let millerIndex = index" title="{{ miller.name }} - {{ miller.address }}">
<ng-template ngbPanelContent>
<p>Name: {{ miller.name }}</p>
<p>Address: {{ miller.address }}</p>
<p>
<strong>{{ miller.name }}'s Farms</strong>
</p>
search(farmName: string, millerName: string) {
// service being called and snippet of mapping
const x = this.dataService.data.millers.map(miller => {
this.modelData = x;
// Correctly logs results
console.log(this.modelData);
}
angular ng-bootstrap
edited Nov 22 '18 at 10:34
CornelC
1,425916
asked Nov 22 '18 at 10:17
jmckiejmckie
969
what isxinsidemap()function?
– Teun van der Wijst
Nov 22 '18 at 10:23
Loops through and returns values if there's a match via name which it correctly does.
– jmckie
Nov 22 '18 at 10:24
add a comment |
I'm currently trying to update an accordion from a search that returns an array. On the first load, the full set of results are correctly shown from a service. However, when I search I get the correct values in the console but even with ngModel it is not being updated. Any suggestions?
// Snippet of accordion
<ngb-accordion [closeOthers]="true">
<ngb-panel [(ngModel)]="modelData" ngDefaultControl *ngFor="let miller of dataService.data.millers; let millerIndex = index" title="{{ miller.name }} - {{ miller.address }}">
<ng-template ngbPanelContent>
<p>Name: {{ miller.name }}</p>
<p>Address: {{ miller.address }}</p>
<p>
<strong>{{ miller.name }}'s Farms</strong>
</p>
search(farmName: string, millerName: string) {
// service being called and snippet of mapping
const x = this.dataService.data.millers.map(miller => {
this.modelData = x;
// Correctly logs results
console.log(this.modelData);
}
angular ng-bootstrap
edited Nov 22 '18 at 10:34
CornelC
1,425916
asked Nov 22 '18 at 10:17
jmckiejmckie
969
I'm currently trying to update an accordion from a search that returns an array. On the first load, the full set of results are correctly shown from a service. However, when I search I get the correct values in the console but even with ngModel it is not being updated. Any suggestions?
// Snippet of accordion
<ngb-accordion [closeOthers]="true">
<ngb-panel [(ngModel)]="modelData" ngDefaultControl *ngFor="let miller of dataService.data.millers; let millerIndex = index" title="{{ miller.name }} - {{ miller.address }}">
<ng-template ngbPanelContent>
<p>Name: {{ miller.name }}</p>
<p>Address: {{ miller.address }}</p>
<p>
<strong>{{ miller.name }}'s Farms</strong>
</p>
search(farmName: string, millerName: string) {
// service being called and snippet of mapping
const x = this.dataService.data.millers.map(miller => {
this.modelData = x;
// Correctly logs results
console.log(this.modelData);
}
angular ng-bootstrap
angular ng-bootstrap
edited Nov 22 '18 at 10:34
CornelC
1,425916
asked Nov 22 '18 at 10:17
jmckiejmckie
969
edited Nov 22 '18 at 10:34
CornelC
1,425916
asked Nov 22 '18 at 10:17
jmckiejmckie
969
edited Nov 22 '18 at 10:34
CornelC
1,425916
edited Nov 22 '18 at 10:34
CornelC
1,425916
edited Nov 22 '18 at 10:34
CornelC
1,425916
1,425916
asked Nov 22 '18 at 10:17
jmckiejmckie
969
asked Nov 22 '18 at 10:17
jmckiejmckie
969
asked Nov 22 '18 at 10:17
jmckiejmckie
969
969
what isxinsidemap()function?
– Teun van der Wijst
Nov 22 '18 at 10:23
Loops through and returns values if there's a match via name which it correctly does.
– jmckie
Nov 22 '18 at 10:24
add a comment |
what isxinsidemap()function?
– Teun van der Wijst
Nov 22 '18 at 10:23
Loops through and returns values if there's a match via name which it correctly does.
– jmckie
Nov 22 '18 at 10:24
what is
x inside map() function?– Teun van der Wijst
Nov 22 '18 at 10:23
what is
x inside map() function?– Teun van der Wijst
Nov 22 '18 at 10:23
Loops through and returns values if there's a match via name which it correctly does.
– jmckie
Nov 22 '18 at 10:24
Loops through and returns values if there's a match via name which it correctly does.
– jmckie
Nov 22 '18 at 10:24
add a comment |
1 Answer
1
active
oldest
votes
Your model with ngModel is probably useless since you iterate over your service to display your data.
You simply need to correctly update your data from your service directly, or change the iteration of the ngFor on your modelData used in your component.
The second option is recommended.
answered Nov 22 '18 at 10:34
Alex BeugnetAlex Beugnet
2,06631235
Been looking at this for a while, could you give me an example please Alex. Thanks
– jmckie
Nov 22 '18 at 10:41
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53428667%2fangular-update-accordion-with-results%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
Your model with ngModel is probably useless since you iterate over your service to display your data.
You simply need to correctly update your data from your service directly, or change the iteration of the ngFor on your modelData used in your component.
The second option is recommended.
answered Nov 22 '18 at 10:34
Alex BeugnetAlex Beugnet
2,06631235
Been looking at this for a while, could you give me an example please Alex. Thanks
– jmckie
Nov 22 '18 at 10:41
add a comment |
Your model with ngModel is probably useless since you iterate over your service to display your data.
You simply need to correctly update your data from your service directly, or change the iteration of the ngFor on your modelData used in your component.
The second option is recommended.
answered Nov 22 '18 at 10:34
Alex BeugnetAlex Beugnet
2,06631235
Been looking at this for a while, could you give me an example please Alex. Thanks
– jmckie
Nov 22 '18 at 10:41
add a comment |
Your model with ngModel is probably useless since you iterate over your service to display your data.
You simply need to correctly update your data from your service directly, or change the iteration of the ngFor on your modelData used in your component.
The second option is recommended.
answered Nov 22 '18 at 10:34
Alex BeugnetAlex Beugnet
2,06631235
Your model with ngModel is probably useless since you iterate over your service to display your data.
You simply need to correctly update your data from your service directly, or change the iteration of the ngFor on your modelData used in your component.
The second option is recommended.
answered Nov 22 '18 at 10:34
Alex BeugnetAlex Beugnet
2,06631235
answered Nov 22 '18 at 10:34
Alex BeugnetAlex Beugnet
2,06631235
answered Nov 22 '18 at 10:34
Alex BeugnetAlex Beugnet
2,06631235
answered Nov 22 '18 at 10:34
Alex BeugnetAlex Beugnet
2,06631235
2,06631235
Been looking at this for a while, could you give me an example please Alex. Thanks
– jmckie
Nov 22 '18 at 10:41
add a comment |
Been looking at this for a while, could you give me an example please Alex. Thanks
– jmckie
Nov 22 '18 at 10:41
Been looking at this for a while, could you give me an example please Alex. Thanks
– jmckie
Nov 22 '18 at 10:41
Been looking at this for a while, could you give me an example please Alex. Thanks
– jmckie
Nov 22 '18 at 10:41
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53428667%2fangular-update-accordion-with-results%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
what is
xinsidemap()function?– Teun van der Wijst
Nov 22 '18 at 10:23
Loops through and returns values if there's a match via name which it correctly does.
– jmckie
Nov 22 '18 at 10:24