I got an object project which contains some properties and an array, when I try to loop trough it like this it's not working:
<img *ngFor="let image of {{project?.acf.images}}" src="{{image.image.url}}">
When I display it like this: {{project?.acf.images[0].image.url}}, it perfectly shows the url. Anything wrong with my syntax?
Interpolation is not needed in NgFor directive:
<img *ngFor="let image of project?.acf.images" src="{{image.image.url}}">
Related
I have post my html elements to data base like this
<article>
<h1> <span> text editors</span></h1>
<h2>برامج بنستخدمها عشان نكتب الكود بتاعنا وفي اضافات كتيرة بتسهل الشغل بتاعنا -</h2>
<h2>
<a target=_blank href="https://atom.en.uptodown.com/windows">Atom</a> وتاني برنامج هو <a target=_blank href="https://code.visualstudio.com/download">VS Code</a> عندك برنامجين حلويين جدا اول برنامج -
</h2>
<h2><a target=_blank href="https://code.visualstudio.com/download">للتحميل اضغط هنا</a> VS Code في الشرح بتاعنا هنستخدم -</h2>
<h2>زي الفيديو وبعد نفتح البرنامج عادي install بعد كدا هنعمل -</h2>
</article>
and I have get these data to my website. I need away to display the html in ejs. I tried many things but nothing works. I tried to dom-parse and it returns one element.
It's not a good idea to store complete elements in your DB, cause you might need to change the styling or the structure later.
What you can do instead, is store the data inside each of the tags in your DB, fetch the data when your site loads, and then add it to the elements.
If I have a set of data called products and if want to render them on a view page I can do something like this:
<ul class="product_list">
{{#each products}}
<li>{{products.ProductTitle}}</li>
{{/each}}
</ul>
But in that loop above, I want to include some other data like this:
<ul class="product_list">
{{#each products}}
<li>{{products.ProductTitle}}</li>
<img src="{{appvar.CDN}}/img.jpg"/> // appvar is a different data object
{{/each}}
</ul>
At the moment, if I do as above, I get nothing back from {{appvar.CDN}}. No error, just nothing... so it ends up rendering like <img src="/img.jpg"/>
I can't see this particular scenario addressed in the handlebars.js documentation (I think a lot of stuff is undocumented! may have to look into vue.js for the server side).
Take a look at the handlebars documenation for paths https://handlebarsjs.com/#paths. To access the appvar you might need to include ../ before your property name, so that handlebars will evaluate it against a parent context.
I am trying to write an ejs file with a for-each loop that displays, as text, names of javascript variables line by line. I want each name to be hyperlinked to a route, such as /getinfo, that renders a page that displays more information about the variable that was clicked on.
I tried to use an "a href" tag as follows:
<a href="/getinfo?name=" <%= variable.name>> <%= variable.name %></a>
I expected variable.name to be included in the URL's query parameters, but it won't be appended properly. Considering how HTML does not support string concatenation, I am not sure how to properly include this data in an HTTP GET request.
What would be a correct way to achieve this? Thank you!
It's simple. Using template literal
<a href="<%= `/getinfo?name=${variable.name}${variable.name}` %>">
Regular ejs to output escaped html
<a href="/getinfo?name=<%= variable.name %><%= variable.name %>">
I have a template variable in MODx EVO and its called image-link.
The URL of the images are something like... http://www.friendssite-image5.jpg.
In my HTML I have this:
[[if? &is=`[+image-link+]:not_empty` &then=`
<div class="image-link">
<a href="[~[+id+]~]"><img alt="[*longtitle*]" src=
"[+image-link+]"></a>
</div>`]]
I tried setting the template variable as URL , also as image, and also as text, but the image does not want to appear. How can I solve this?
I noticed that you have your tags mixed between [+...+] and [...]. The "+" signs are for use with Ditto, but if you are placing the call directly in your document, use the "*" signs instead.
Example
Change:
[[if? &is=`[+image-link+]:not_empty` &then=`
<div class="image-link">
<a href="[~[+id+]~]"><img alt="[*longtitle*]" src=
"[+image-link+]"></a>
</div>`]]
To:
[[if? &is=`[*image-link*]:not_empty` &then=`
<div class="image-link">
<a href="[~[*id*]~]"><img alt="[*longtitle*]" src=
"[*image-link*]"></a>
</div>`]]
Is there a way to display an image using a string built from several values? Ie. I want to show an image whose path contains an attribute value. Example of my code (which doesn't work):
<img src="{'subdirectory/' + #title + '150p.png'}" />
This tries, and fails, to display an image with the path "subdirectory/main150p.png" if the current node's "title" attribute = "main".
Looks like you may be thinking in Javascript instead of in XPath. Try <img src="{concat('subdirectory/', #title, '150p.png')}" />