I am trying to list all data from my firebase database where the logged in facebook user's email address is the same as the email found in the database:
The following code is not working, lots of formatting issues, no idea how should i rewrite this
<ng-container *ngFor="let item of fogasadatok; let i = index">
<ion-card *ngIf="{{item.useremail}}=={{navParams.data.facebookemail}}">
<img src="{{item.keplink}}"/>
<ion-card-content>
<ion-card-title>
{{item.datum}} - Ponty
</ion-card-title>
<p>
Egyéb:
</p>
</ion-card-content>
</ion-card>
You do not need interpolation ({{}}) for structural directives like *ngFor or *ngIf. Interpolation is only needed when you want to bind to a value that needs to be stringified for rendering in the DOM (like item.keplink). The expression for your *ngIf should look as follows:
*ngIf="item.useremail === navParams.data.facebookemail"
Related
I have a Tree View that is build dynamically based on a REST call. The full taxonomy is delivered initially, though we may implement lazy loading later.
Does anyone have an example of the following or at least a suggestion on where to begin for the following use cases:
I need to route into the tree for a specific node. If the url is .../node2/child3/child5, I need the tree to open to those 3 levels and automatically select that Child5 node item.
If opening the tree without routing, have the tree auto-expand the first level and select the first root node.
The Tree that I have build thus far looks like this:
<clr-tree-node *ngIf="taxonomy">
<ng-template #recursiveTree let-taxonomy>
<clr-tree-node *ngFor="let child of taxonomy">
<button (click)="openFile(child, null)" class="clr-treenode-link">
{{child.en_name}}
</button>
<ng-template [clrIfExpanded]="false" *ngIf="child.children?.length > 0">
<ng-container *ngTemplateOutlet="recursiveTree; context:{ $implicit: child.children }"></ng-container>
</ng-template>
</clr-tree-node>
</ng-template>
<ng-container *ngTemplateOutlet="recursiveTree; context:{ $implicit: taxonomy }"></ng-container>
</clr-tree-node>
This is very specialized to your dataset, so in general the issue you need to resolve is knowing which of the clrIfExpanded directives should be set to true. You've got it hard coded to false in the example above. I'd suggest you use a property on the tree itself (like node.expanded) to store the expanded state, set to false by default.
Then, you'd have to inspect the route and params, load your data, parse the tree yourself and change the node.expanded property to true to expand. So to update your example:
<clr-tree-node *ngIf="taxonomy">
<ng-template #recursiveTree let-taxonomy>
<clr-tree-node *ngFor="let child of taxonomy">
<button (click)="openFile(child, null)" class="clr-treenode-link">
{{child.en_name}}
</button>
<ng-template [clrIfExpanded]="child.expanded" *ngIf="child.children?.length > 0">
<ng-container *ngTemplateOutlet="recursiveTree; context:{ $implicit: child.children }"></ng-container>
</ng-template>
</clr-tree-node>
</ng-template>
<ng-container *ngTemplateOutlet="recursiveTree; context:{ $implicit: taxonomy }"></ng-container>
</clr-tree-node>
Then you would have to parse the data structure after it loads from the API, compare the route params against it, and toggle the child.expanded properties for any parts of the route.
The add button that appears over the 2sxc items is missing all of a sudden. It was there a couple days agao but now when I log into any portal in my DNN instance the "+" or add button is missing
here is a screen shot:
As you can see, the change layout and edit buttons are there. Not sure why the add button disappeared.
This is true for apps that I import from the 2sxc.org website as well. So I know its not just my template becasue it also happens on all the apps I have created which use different templates.
But to be thorough, here is my template code, its token based:
<div class="kr-gallery animation">
<p>Hover or touch image and click brush icon for more details</p>
<div class="isotope_grid isotope_grid2">
<div class="isotope_main animation" data-min-width="230">
<repeat repeat="Content in Data:Default">
<div class="isotope_item kr-gallery-item sc-element">[Content:Toolbar]
<div class="photo"><a href="[Tab:FullUrl]/details/[Content:EntityId]"> <img alt="" src="[Content:Image]?h=500" />
<span class="fa fa-paint-brush"></span></a>
</div>
</div>
</repeat>
</div>
</div>
</div>
Any idea why this is?
UPDATE:
Here is my visual query:
SOLUTION:
Based on answer, I switched to razor because I am using a custom query. Here is my simple template code now:
#* this will show an "add" button if the current user is an editor *#
#Edit.Toolbar(actions: "new", contentType: "Image")
#{
// get all images as delived from the standard query
var images = AsDynamic(Data["Default"]);
}
<div class="kr-gallery animation">
<p>Hover or touch image and click brush icon for more details</p>
<div class="isotope_grid isotope_grid2">
<div class="isotope_main animation" data-min-width="230">
#foreach(var img in images)
{
<div class="isotope_item kr-gallery-item sc-element">#img.Toolbar
<div class="photo"><a href="#Link.To(parameters: "details=" + img.EntityId)"> <img alt="#img.Title" src="#img.Image?h=500" />
<span class="fa fa-paint-brush"></span></a>
</div>
</div>
}
</div>
</div>
</div>
The missing + is by design, because editors are used to the + adding an item right after the previous one. This behavior cannot be guaranteed with a query, as the order of things is determined by the query. It is even possible, that adding an item will not show up, if a query-parameter hides that item.
So the design pattern is to provide a separate + button. The easiest way is in razor, I believe the code is something like
#Edit.Toolbar(actions: "new", contentType: "your-content-type-name")
In Tokens it's a bit more messy, and you cannot conditionally check if a user has edit-permissions.
So I recommend you go the edit.toolbar way
You can also find an example of this in the blog app: http://2sxc.org/en/apps/app/dnn-blog-app-for-dnn-dotnetnuke
I could be wrong but did you recently experiment with the visual query designer? Because this could be the cause.
The most common reason is when you use a pipeline (visual query) to deliver data to a template, which is not assigned to this instance. Reason is that "add" in a instance-list of items add it to a specific position (like right after the first one). This isn't the same when you use data like a data base - as there is no sorting in that scenario. So if this is the cause, I'll help you more.
I'm trying to create a quiz app on Meteor and have had trouble setting up Iron Router forever. I'll try to give a visual:
This is the front page:
Image 1
When a user clicks on the button shown above, I want the first question to show up, whose contents are filled from MongoDB.
Image 2
This is what my router looks like ("question" is the name of the question template, as seen in image 2):
Router.route("/quiz/:_id", {
name: "question",
data: function(){
return Quiz.findOne(this.params._id);}
});
Now, in order for me to get from image 1 to image 2, I have to use a mongo object _id in the html file.
<template name="main">
<div class="jumbotron">
<h2>
Welcome to Simple Meteor Quiz app!
</h2>
<p>
To try it out, simply click "start" below!
</p>
<p>
<a class="btn btn-primary btn-large" href="/quiz/cieLkdzvGZPwrnZYE">Start</a>
</p>
</div>
</template>
When I click "Next Question" on image 2 to go onto the 2nd question, it doesn't work. I don't know how to make this process dynamic.
The way it looks to me right now is that I physically have to create a new route for every single question, which would look really ugly really quickly.
Any way to help implement Iron Router in this scenario? I read Discover Meteor and thought I fully understood how Iron Router works, but the more I try to fix this, the more I get confused.
Edit:
To solve my dilemma, I simple created a helper function which I could place behind the /quiz/ in the main template to lead me to the quiz question, based on a suggestion by Michel Floyd.
So the helper ends up looking like this:
Template.main.helpers({
nextQuestion: function(){
queue = Quiz.find().fetch();
return queue[0]._id;
}
});
Then attached to the URL like this:
<a class="btn btn-primary btn-large" href="/quiz/{{nextQuestion}}">Start</a>
Basically just spit out the first _id of first item in the array by making the collection an array via find().fetch(). Will probably randomize the _id at a later time.
You need a way for each template to know what the next question is. For example you can add a nextQuestionId key to your Quiz object. Then your template can be:
<template name="main">
<div class="jumbotron">
<h2>
Welcome to Simple Meteor Quiz app!
</h2>
<p>
To try it out, simply click "start" below!
</p>
<p>
<a class="btn btn-primary btn-large" href="/quiz/{{nextQuestionId}}">
Start
</a>
</p>
</div>
</template>
I'm migrating some code to blaze and have hit a problem with the bootstrap carousel that I can't seem to get over.
I had the following pre blaze to set one of the carousel items active to kick the whole thing off
<div class="item {{#if active_sponsor}}active{{/if}}">
As documented, this no longer works with blaze, so I've tried modifying it to the only thing I can think of which is
{{#if active_sponsor}}
<div class="item {{#if active_sponsor}}active{{/if}}">
{{else}}
<div class="item">
{{/if}}
This all lives within an {{each sponsors}} block.
Sadly, this fails to run with an error saying unexpected {{else}} (or, if I remove the {{else}} unexpected {{/if}}
What's the correct way to do this. I'm using exactly the same pattern earlier to change a
From "Using Blaze" on github :
https://github.com/meteor/meteor/wiki/Using-Blaze#conditional-attributes-with-no-value-eg-checked-selected
So you should use this form instead, assuming that active_sponsor is the property to look for in the current data context.
Template.whatever.helpers({
isActive:function(){
return this.active_sponsor?"active":"";
}
});
<div class="item {{isActive}}">
</div>
I'm making a movie search based on data I'm getting from rotten tomatoes api. I'm using handlebars.js. So far I've got this template and it works just fine.
<div class="info">
<h3>{{title}}</h3>
<span> Year: {{year}} </span>
<span> Studio:{{studio}} </span>
<span> Synopsis:{{synopsis}} <span>
</div>
However, some of of movies don't have a studio provided so I'd like to make that in this case no "Studio:" would be printed. This is my code to do so:
{{#if studio}}
<span> Studio:{{studio}} </span>
{{/if}}
I've copied it from example provided on handebars.js page. Still it doesn't work. Could anyone explain me what I'm missing? I suppose there is no need to use Handlebars.registerHelper since I'm using this simple if statement. Or is it?
see this jsFiddle. You should not have any issue with that.
From documentation.
You can use the if helper to conditionally render a block. If its
argument returns false, undefined, null, "" or [] (a "falsy" value),
Handlebars will not render the block.
So check your 'studio' value.
Code that i have fiddled.
HTML:
<p>{{name1}}</p>
{{#if name2}}
<p>{{name2}}</p>
{{/if}}
<p>End</p>
js:
this.$el.html(temp({name1: 'stack'}));