I need to show the image from array. And the array is already in array.
Example like this
{
title:xyz
attachments: [
{
image:'xyz.com'
}]}
im showing like this but image is not showing just title is showing
<ion-card *ngFor="let x of art">
<img [src]="x.attachments.url || '/assets/shapes.svg'" class="image"/>
<div style="text-align: right;">{{x.title}}</div>
</ion-card>
but its not showing image Its showing unexpeted image of cross camera
[![enter image description here][2]][2]
That [ on the attachments line indicates that its an array of objects.
You need to access [0] like this:
<ion-card *ngFor="let x of art">
<img [src]="x.attachments[0].url || '/assets/shapes.svg'" class="image"/>
<div style="text-align: right;">{{x.title}}</div>
</ion-card>
I think to be safe you should also put a ? in there but this is just off the top of my head, I haven't double-checked it:
<ion-card *ngFor="let x of art">
<img [src]="x.attachments[0]?.url || '/assets/shapes.svg'" class="image"/>
<div style="text-align: right;">{{x.title}}</div>
</ion-card>
Basically, if I got the syntax right then it won't show an error if there are no attachments in that Art item.
It's called the "Angular Safe Navigation Operator" if you want to research it more.
Related
We have a vue-js page (#vue/cli 4.5.6) with numerous components, which mostly works fine. One component is doing something I don't understand: There are two radio boxes, one at the top of the page, one at the bottom. They seem to be completely unrelated; here's one
<template v-for="qSection in qSections">
...
<!--- loop to output individual questions here --->
<tr v-for = "question in qSection.questions">
<td>
{{ question.txt }}
<div v-if="question.incf">
<br/>
<textarea rows="2" cols = "80" :name= "question.cmt"
v-model="question.cmt" placeholder = "Comments here"
class="hideOnPrint"
/>
<div class="print-only"> {{ question.cmt }} </div>
</div>
</td>
<!-- okay, three more tds to hold radio box-->
<template v-for="icnt in [1,2,3]">
<td>
<label v-if="question.otherAns" class="other-ans-label">
{{ question.otherAns[icnt].txt }}
</label><br/><br/>
<input type = "radio" :name= "question.quesn" :value = "(icnt%3)"
v-model="question.answer"/>
</td>
</template>
</tr>
Here's the other
<template v-if="section.otype1 != 'Laboratory'">
<div class="hideOnPrint">
<input type = "radio" :name = "section.accept" :value="1"
v-model="section.accept"
>
{{acceptPhrase}}
</input>
<br/><br/>
<input type = "radio" :name = "section.accept" :value="0"
v-model="section.accept"
>
Investigation is incomplete. See comments.
</input><br/><br/>
</div>
</template>
So what has been happening is that clicking the radio button in the bottom area (only for value="1") un-clicks the radio button in the top area (question.answer, whichever is chosen).
According to the Vue app in Developer Tools, the top area data is still set: questions.answer = 2 still, say. And indeed if I set it equal to 1 there and back to 2, that radio box gets re-checked correctly.
How is this happening and what do I change to fix it? Or what should I do to diagnose it. Thanks!
I'd like to put up a working example but not sure how; the rest of the page has a lot of parts.
Oh, wow: I realized my mistake. It's those lines in the code,
:name= "question.quesn"
and
:name = "section.accept".
These are setting the name of the radio box to the value of those fields. They both end up equal to 1, and therefore the two radio boxes become a single radio box. Clicking one turns the other one off.
Shouldn't be using name at all; v-model does the job.
can anyone explain why this can happen? when I use this command
<mat-list>
<mat-list-item>
<img matListAvatar>
<mat-divider></mat-divider>
<p mat-line-end class="abu">Andika Ristian</p>
<p mat-line class="abu">My Name Is</p>
<img mat-line-end src="assets/imgs/panah.png">
</mat-list-item>
</mat-list>
the result will be like this
but if i use the command like this with the same font as above.
<mat-list>
<mat-list-item>
<img matListAvatar>
<mat-divider></mat-divider>
<p mat-line-end class="abu">Andika </p>
<p mat-line-end class="abu">Ristian </p>
<p mat-line class="abu">My Name Is</p>
<img mat-line-end src="assets/imgs/panah.png">
</mat-list-item>
</mat-list>
The result will be like this
I'm expected the result like the second picture but i think if i use the second command, it's not a solution to solve this. And for addition, i try to make the text align is right. the result will be like this
as the image above, the text is not same line with the other one. Thanks before
Just increase the width of your name.
.abu {
width: 150px;
}
I have created custom latest blog template. But I can't show cover images in thumbnails.
Cover image should be here:
I have written following code to show the cover image:
<div class="panel">
<t t-set="properties" t-value="json.loads(post.cover_properties)">
<a class="o_panel_cover" t-attf-href="#{blog_url('', ['blog', 'post'], blog=post.blog_id, post=post)}" t-att-style="background-image: #{cover_properties.get('background-image')};">
</a>
</t>
<div class="panel-heading mt0 mb0">
<h4 class="mt0 mb0">
<a t-attf-href="#{blog_url('', ['blog', 'post'], blog=post.blog_id, post=post)}" t-field="post.name"></a>
<span t-if="not post.website_published" class="text-warning">
<span class="fa fa-exclamation-triangle ml8" title="Unpublished"/>
</span>
</h4>
</div>
After writing the code image not loading and it shows like this:
How can I show the image?
I will suggest you to clear the cache of the browser, sometimes because of cache overloading we don't get image.
Firstly, there are several things with the controller.
The latest post route doesn't render cover-properties, it is like below:
return request.render("website_blog.latest_blogs", {
'posts': posts,
'pager': pager,
'blog_url': blog_url,
})
So I added necessary functions in my controller and returned like this:
return request.render("website_blog.latest_blogs", {
'posts': posts,
'pager': pager,
'blog_url': blog_url,
'blogs':blogs,
'blog_posts': blog_posts,
'blog_posts_cover_properties': [json.loads(b.cover_properties) for b in blog_posts],
})
On XML returned like this:
<t t-set="cover_properties" t-value="blog_posts_cover_properties[post_index]"/>
<a class="o_panel_cover" t-attf-href="#{blog_url('', ['blog', 'post'], blog=post.blog_id, post=post)}"
t-attf-style="background-image: #{cover_properties.get('background-image')};"></a>
I'm making a bunch of content boxes to render to the master. They all contain a background picture, a heading and content, all are ment to be optional. so if none = empty divs. -> removed.
it all seemed allright i used the #Umbraco.Field for text and #Umbraco.Media(CurrentPage.myMediaAlias).url for the bg picture. Using 'media picker' as datatype.
No problem leaving the heading and content fields blank.
But the problem started when there was no picture defined for the last box.
i got the:
Object reference not set to an instance of an object.
[No relevant source lines]
Since it is supposed to be optional to put in that picture, i would rather want a null back.
The media picker property is not mandatory. How can i get this to work?
#section contentMid2 {
<div class="c-box-wrapper">
<div class="c-box" id="c-box-3" Style="background-image: url(#Umbraco.Media(CurrentPage.box3Bg).Url )" >
<div class="transbox">
<div class="home-head-1"> #Umbraco.Field("mainHeading3") </div>
<div class="content-text1"><p>#Umbraco.Field("mainContent3")</p></div>
</div>
</div>
}
Untested - but something like this should work. They key being to use HasValue
if(#CurrentPage.HasValue("box3Bg"){
<div class="c-box" id="c-box-3" Style="background-image: url(#Umbraco.Media(CurrentPage.box3Bg).Url )" >
}
else{
<div class="c-box" id="c-box-3">
}
OR
#{
var inlineStyle = "";
if(#CurrentPage.HasValue("box3Bg"){
inlineStyle = background-image: url(#Umbraco.Media(CurrentPage.box3Bg).Url )
}
}
<div class="c-box-wrapper">
<div class="c-box" id="c-box-3" Style="#inlineStyle" >
<div class="transbox">
<div class="home-head-1"> #Umbraco.Field("mainHeading3") </div>
<div class="content-text1"><p>#Umbraco.Field("mainContent3")</p></div>
</div>
</div>
</div>
After some debuging and some help from #marco. i realized how to fix it:
<div class="c-box" id="c-box-3" Style="background-image: url(#(Umbraco.Media(CurrentPage.box3Bg.ToString())!=""?Umbraco.Media(CurrentPage.box3Bg).Url:Umbraco.Media(CurrentPage.box1Bg).Url))" >
It's a Shorthand, and still inside the style url: #(theobj!=empty?nah:yah) works like a charm.
But i had to convert theobj .ToString() before comparing or it or else it seems like .Media cant decide if it's int or string. even if the question was if it's nothing in there at all.
I am writing a test in Webdriver C# with Nunit. I have a search results page loaded with a list of products with images. I want to click the 1st image in the results.
I have tried using the Xpath (I used firepath to get this value)
[FindsBy(How = How.XPath, Using = "html/body/form/div[2]/div[4]/div/div[2]/p")]
private IWebElement ProductImage_xpath {get; set; }
When it runs it says:
Could not find element by XPath.
I would like to use CSS selector if possible as that is faster than finding by Xpath.
What syntax could I use to locate the image from the code snipped below?
Note: the hyperlinks are dynamic, I don't want to use the href.
public SearchResultsPage clickProduct_Image()
{
ProductImage_xpath.Click();
Console.Out.WriteLine("ProductImage = " + ProductImage_xpath.Text);
return new SearchResultsPage(Driver);
}
The Code snippet:
<div id="main" class="nav_redesign s-left-nav-rib-redesign" data-page-construction="aui" skeleton-key="results--searchTemplate listLayout so_gb_en --left-nav--shopping-engine">
<div id="topStatic">
<div id="top">
<div id="topAmabot"> </div>
<div id="searchTemplate" class="searchTemplate listLayout so_gb_en ">
<div id="topDynamicContent">
<div id="rightContainerATF">
<div id="rightResultsATF">
<div id="widthPreserver"></div>
<div id="centerPlus">
<div id="rhsAjax"></div>
<div id="resultsCol" class="">
<div id="centerMinus" class="">
<div id="atfResults" class="list results apsList">
<div id="result_0" class="fstRow prod celwidget" name="1780974728">
<div class="linePlaceholder"></div>
<div class="image imageContainer">
<a href="http://testerServer1co.uk/SpaceExplorer/dp/1780974728/ref=sr_1_1?ie=UTF8&qid=1409311161&sr=8-1&keywords=planets+1">
<div class="imageBox">
<img class="productImage cfMarker" alt="Product Details" src="http://ecx.images-test.com/images/I/51iYWWt1BqL._SL160_PIsitb-sticker-arrow-dp,TopRight,12,-18_SH30_OU02_AA160_.jpg" onload="viewCompleteImageLoaded(this, new Date().getTime(), 16, false);">
</div>
Xpath is very very bad choice to find element on the page =). As you said better use css selector. I don't know how your image presents on the page, but i'll write possible variants, choose the best one. So, using css selectors to find your image:
1. You can find any element using it's class
//will find "div class="image imageContainer""
driver.findElement(By.Css(".imageContainer"))
2. Combine searching by class and find first "a" child in that div
driver.findElement(By.css(".imageContainer > a"))
3.Find element using known attribute
driver.findElement(By.css("img[alt='Product Details']"))
4. Find element by ID
driver.findElement(By.Css("#atfResults"));
//or
driver.findElement(By.Id("atfResults"));
Well, it will be enough for you, i think. If you have any questions, you are welcome.