how to display 2 sets of lists in the same list using ngFor (nativescript)How to initialize all members of an array to the same value?How to convert an Array to a Set in JavaHow to remove the first Item from a list?*ngIf and *ngFor on same element causing errorDoes Nativescript using Angular2 need special a *ngFor?In angular2 & nativescript the *ngFor display array's elements on top of each otherHow to make *ngFor work with an ObservableArray in Nativescript?Dynamic object key to display *ngFor in Nativescript with AngularIs *ngFor stable for lists in Nativescript Angular?How to Nest List Views in NativeScript
Reverse dots and boxes, swastika edition
How to md5 a list of filepaths contained in a file?
definition of "percentile"
Simple interepretation problem regarding Polynomial Hierarchy?
How to tell someone I'd like to become friends without causing them to them think I'm romantically interested in them?
Integer Lists of Noah
What is a solution?
How can I effectively communicate to recruiters that a phone call is not possible?
Mysterious Metal Plate on Basement Ceiling?
Matchmaker, Matchmaker, make me a match
Why do players in the past play much longer tournaments than today's top players?
Why did Harry Potter get a bedroom?
What was the definition of "set" that resulted in Russell's Paradox
Why are Hobbits so fond of mushrooms?
Can fluent English speakers distinguish “steel”, “still” and “steal”?
Graduate student with abysmal English writing skills, how to help
How would vampires avoid contracting diseases?
How to wire 3 hots / 3 neutrals into this new TR outlet with 2 screws?
Keep milk (or milk alternative) for a day without a fridge
How did the hit man miss?
Storming Area 51
How to properly say "bail on somebody" in German?
C program to parse source code of another language
Why were Er and Onan punished if they were under 20?
how to display 2 sets of lists in the same list using ngFor (nativescript)
How to initialize all members of an array to the same value?How to convert an Array to a Set in JavaHow to remove the first Item from a list?*ngIf and *ngFor on same element causing errorDoes Nativescript using Angular2 need special a *ngFor?In angular2 & nativescript the *ngFor display array's elements on top of each otherHow to make *ngFor work with an ObservableArray in Nativescript?Dynamic object key to display *ngFor in Nativescript with AngularIs *ngFor stable for lists in Nativescript Angular?How to Nest List Views in NativeScript
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;
Using nativescript to develop an iphone app. I'm trying to display 2 lists using ngFor to loop through an array.
for example...my data looks like this
object (this.metroGroup):
YL: [
"Line": "Shady Grove",
"Min": 2,
,
"Line": "Glenmont",
"Min": 4,
],
GR: [
"Line": "Blue Field",
"Min": 6,
,
"Line": "Green Line",
"Min": 8,
]
Template code:
<ScrollView row="1">
<StackLayout *ngIf="metroGroup.GR">
<Label text="Green" class="train-stop-label"></Label>
<StackLayout *ngFor="let metro of metroGroup.GR" class="list-group-item">
<Label class="h3" [text]="metro.Line"></Label>
<Label class="h3" [text]="metro.Min"></Label>
</StackLayout>
</StackLayout>
<StackLayout *ngIf="metroGroup.YL">
<Label text="Yellow" class="train-stop-label"></Label>
<StackLayout *ngFor="let metro of metroGroup.YL" class="list-group-item">
<Label class="h3" [text]="metro.Line"></Label>
<Label class="h3" [text]="metro.Min"></Label>
</StackLayout>
</StackLayout>
</ScrollView>
right now only the yellow is displayed....it seems like the yellow stacks on top of the green list. have any ideas on how to display both at the same time?
arrays
angular nativescript ngfor nativescript-angular asked Mar 26 at 2:37
jeremyjeremy
1852 silver badges14 bronze badges
add a comment |
Using nativescript to develop an iphone app. I'm trying to display 2 lists using ngFor to loop through an array.
for example...my data looks like this
object (this.metroGroup):
YL: [
"Line": "Shady Grove",
"Min": 2,
,
"Line": "Glenmont",
"Min": 4,
],
GR: [
"Line": "Blue Field",
"Min": 6,
,
"Line": "Green Line",
"Min": 8,
]
Template code:
<ScrollView row="1">
<StackLayout *ngIf="metroGroup.GR">
<Label text="Green" class="train-stop-label"></Label>
<StackLayout *ngFor="let metro of metroGroup.GR" class="list-group-item">
<Label class="h3" [text]="metro.Line"></Label>
<Label class="h3" [text]="metro.Min"></Label>
</StackLayout>
</StackLayout>
<StackLayout *ngIf="metroGroup.YL">
<Label text="Yellow" class="train-stop-label"></Label>
<StackLayout *ngFor="let metro of metroGroup.YL" class="list-group-item">
<Label class="h3" [text]="metro.Line"></Label>
<Label class="h3" [text]="metro.Min"></Label>
</StackLayout>
</StackLayout>
</ScrollView>
right now only the yellow is displayed....it seems like the yellow stacks on top of the green list. have any ideas on how to display both at the same time?
arrays
angular nativescript ngfor nativescript-angular asked Mar 26 at 2:37
jeremyjeremy
1852 silver badges14 bronze badges
add a comment |
Using nativescript to develop an iphone app. I'm trying to display 2 lists using ngFor to loop through an array.
for example...my data looks like this
object (this.metroGroup):
YL: [
"Line": "Shady Grove",
"Min": 2,
,
"Line": "Glenmont",
"Min": 4,
],
GR: [
"Line": "Blue Field",
"Min": 6,
,
"Line": "Green Line",
"Min": 8,
]
Template code:
<ScrollView row="1">
<StackLayout *ngIf="metroGroup.GR">
<Label text="Green" class="train-stop-label"></Label>
<StackLayout *ngFor="let metro of metroGroup.GR" class="list-group-item">
<Label class="h3" [text]="metro.Line"></Label>
<Label class="h3" [text]="metro.Min"></Label>
</StackLayout>
</StackLayout>
<StackLayout *ngIf="metroGroup.YL">
<Label text="Yellow" class="train-stop-label"></Label>
<StackLayout *ngFor="let metro of metroGroup.YL" class="list-group-item">
<Label class="h3" [text]="metro.Line"></Label>
<Label class="h3" [text]="metro.Min"></Label>
</StackLayout>
</StackLayout>
</ScrollView>
right now only the yellow is displayed....it seems like the yellow stacks on top of the green list. have any ideas on how to display both at the same time?
arrays
angular nativescript ngfor nativescript-angular asked Mar 26 at 2:37
jeremyjeremy
1852 silver badges14 bronze badges
Using nativescript to develop an iphone app. I'm trying to display 2 lists using ngFor to loop through an array.
for example...my data looks like this
object (this.metroGroup):
YL: [
"Line": "Shady Grove",
"Min": 2,
,
"Line": "Glenmont",
"Min": 4,
],
GR: [
"Line": "Blue Field",
"Min": 6,
,
"Line": "Green Line",
"Min": 8,
]
Template code:
<ScrollView row="1">
<StackLayout *ngIf="metroGroup.GR">
<Label text="Green" class="train-stop-label"></Label>
<StackLayout *ngFor="let metro of metroGroup.GR" class="list-group-item">
<Label class="h3" [text]="metro.Line"></Label>
<Label class="h3" [text]="metro.Min"></Label>
</StackLayout>
</StackLayout>
<StackLayout *ngIf="metroGroup.YL">
<Label text="Yellow" class="train-stop-label"></Label>
<StackLayout *ngFor="let metro of metroGroup.YL" class="list-group-item">
<Label class="h3" [text]="metro.Line"></Label>
<Label class="h3" [text]="metro.Min"></Label>
</StackLayout>
</StackLayout>
</ScrollView>
right now only the yellow is displayed....it seems like the yellow stacks on top of the green list. have any ideas on how to display both at the same time?
arrays
angular nativescript ngfor nativescript-angular arrays
angular nativescript ngfor nativescript-angular asked Mar 26 at 2:37
jeremyjeremy
1852 silver badges14 bronze badges
asked Mar 26 at 2:37
jeremyjeremy
1852 silver badges14 bronze badges
asked Mar 26 at 2:37
jeremyjeremy
1852 silver badges14 bronze badges
asked Mar 26 at 2:37
jeremyjeremy
1852 silver badges14 bronze badges
asked Mar 26 at 2:37
jeremyjeremy
1852 silver badges14 bronze badges
1852 silver badges14 bronze badges
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
You need a parent Layout. I have created a sample playground for you.
<ScrollView class="page">
<StackLayout class="home-panel">
<StackLayout *ngIf="metroGroup.GR">
<Label text="Green" class="train-stop-label"></Label>
<StackLayout *ngFor="let metro of metroGroup.GR" class="list-group-item">
<Label class="h3" [text]="metro.Line"></Label>
<Label class="h3" [text]="metro.Min"></Label>
</StackLayout>
</StackLayout>
<StackLayout *ngIf="metroGroup.YL">
<Label text="Yellow" class="train-stop-label"></Label>
<StackLayout *ngFor="let metro of metroGroup.YL" class="list-group-item">
<Label class="h3" [text]="metro.Line"></Label>
<Label class="h3" [text]="metro.Min"></Label>
</StackLayout>
</StackLayout>
</StackLayout>
</ScrollView>
answered Mar 26 at 3:09
NarendraNarendra
2,8132 gold badges9 silver badges26 bronze badges
1
thanks worked...just needed another stacklayout to nest these into
– jeremy
Mar 26 at 3:14
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%2f55349064%2fhow-to-display-2-sets-of-lists-in-the-same-list-using-ngfor-nativescript%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
You need a parent Layout. I have created a sample playground for you.
<ScrollView class="page">
<StackLayout class="home-panel">
<StackLayout *ngIf="metroGroup.GR">
<Label text="Green" class="train-stop-label"></Label>
<StackLayout *ngFor="let metro of metroGroup.GR" class="list-group-item">
<Label class="h3" [text]="metro.Line"></Label>
<Label class="h3" [text]="metro.Min"></Label>
</StackLayout>
</StackLayout>
<StackLayout *ngIf="metroGroup.YL">
<Label text="Yellow" class="train-stop-label"></Label>
<StackLayout *ngFor="let metro of metroGroup.YL" class="list-group-item">
<Label class="h3" [text]="metro.Line"></Label>
<Label class="h3" [text]="metro.Min"></Label>
</StackLayout>
</StackLayout>
</StackLayout>
</ScrollView>
answered Mar 26 at 3:09
NarendraNarendra
2,8132 gold badges9 silver badges26 bronze badges
1
thanks worked...just needed another stacklayout to nest these into
– jeremy
Mar 26 at 3:14
add a comment |
You need a parent Layout. I have created a sample playground for you.
<ScrollView class="page">
<StackLayout class="home-panel">
<StackLayout *ngIf="metroGroup.GR">
<Label text="Green" class="train-stop-label"></Label>
<StackLayout *ngFor="let metro of metroGroup.GR" class="list-group-item">
<Label class="h3" [text]="metro.Line"></Label>
<Label class="h3" [text]="metro.Min"></Label>
</StackLayout>
</StackLayout>
<StackLayout *ngIf="metroGroup.YL">
<Label text="Yellow" class="train-stop-label"></Label>
<StackLayout *ngFor="let metro of metroGroup.YL" class="list-group-item">
<Label class="h3" [text]="metro.Line"></Label>
<Label class="h3" [text]="metro.Min"></Label>
</StackLayout>
</StackLayout>
</StackLayout>
</ScrollView>
answered Mar 26 at 3:09
NarendraNarendra
2,8132 gold badges9 silver badges26 bronze badges
1
thanks worked...just needed another stacklayout to nest these into
– jeremy
Mar 26 at 3:14
add a comment |
You need a parent Layout. I have created a sample playground for you.
<ScrollView class="page">
<StackLayout class="home-panel">
<StackLayout *ngIf="metroGroup.GR">
<Label text="Green" class="train-stop-label"></Label>
<StackLayout *ngFor="let metro of metroGroup.GR" class="list-group-item">
<Label class="h3" [text]="metro.Line"></Label>
<Label class="h3" [text]="metro.Min"></Label>
</StackLayout>
</StackLayout>
<StackLayout *ngIf="metroGroup.YL">
<Label text="Yellow" class="train-stop-label"></Label>
<StackLayout *ngFor="let metro of metroGroup.YL" class="list-group-item">
<Label class="h3" [text]="metro.Line"></Label>
<Label class="h3" [text]="metro.Min"></Label>
</StackLayout>
</StackLayout>
</StackLayout>
</ScrollView>
answered Mar 26 at 3:09
NarendraNarendra
2,8132 gold badges9 silver badges26 bronze badges
You need a parent Layout. I have created a sample playground for you.
<ScrollView class="page">
<StackLayout class="home-panel">
<StackLayout *ngIf="metroGroup.GR">
<Label text="Green" class="train-stop-label"></Label>
<StackLayout *ngFor="let metro of metroGroup.GR" class="list-group-item">
<Label class="h3" [text]="metro.Line"></Label>
<Label class="h3" [text]="metro.Min"></Label>
</StackLayout>
</StackLayout>
<StackLayout *ngIf="metroGroup.YL">
<Label text="Yellow" class="train-stop-label"></Label>
<StackLayout *ngFor="let metro of metroGroup.YL" class="list-group-item">
<Label class="h3" [text]="metro.Line"></Label>
<Label class="h3" [text]="metro.Min"></Label>
</StackLayout>
</StackLayout>
</StackLayout>
</ScrollView>
answered Mar 26 at 3:09
NarendraNarendra
2,8132 gold badges9 silver badges26 bronze badges
answered Mar 26 at 3:09
NarendraNarendra
2,8132 gold badges9 silver badges26 bronze badges
answered Mar 26 at 3:09
NarendraNarendra
2,8132 gold badges9 silver badges26 bronze badges
answered Mar 26 at 3:09
NarendraNarendra
2,8132 gold badges9 silver badges26 bronze badges
2,8132 gold badges9 silver badges26 bronze badges
1
thanks worked...just needed another stacklayout to nest these into
– jeremy
Mar 26 at 3:14
add a comment |
1
thanks worked...just needed another stacklayout to nest these into
– jeremy
Mar 26 at 3:14
1
1
thanks worked...just needed another stacklayout to nest these into
– jeremy
Mar 26 at 3:14
thanks worked...just needed another stacklayout to nest these into
– jeremy
Mar 26 at 3:14
add a comment |
Got a question that you can’t ask on public Stack Overflow? Learn more about sharing private information with Stack Overflow for Teams.
Got a question that you can’t ask on public Stack Overflow? Learn more about sharing private information with Stack Overflow for Teams.
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%2f55349064%2fhow-to-display-2-sets-of-lists-in-the-same-list-using-ngfor-nativescript%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
