I want to use NG-ZORRO-andt pagination in the Html page, it's showing in my browser but how do I link the data from the api with the pagination?
This is my Html code
<div class="col-md-6 col-lg-4 col-xl-3" *ngFor="let course of peopleHome"> //I want to paginate this data
<div class="card-blog">
<a href="#">
<img src="../assets/images/image10.jpg" alt="" class="img-blog" />
</a>
<div class="card">
<a href="#">
<h4 class="title-blog">{{course.people_title}}</h4>
</a>
</div>
</div>
</div>
<nz-pagination [nzPageIndex]="1" [nzTotal]="peopleHome.length" [nzPageSize]="10"> </nz-pagination>
</div>
So please how can i link my response to nz-pagination?
You are using nz-pagination without any work with your array. How an array should understand that you want to get a part of it? There is two option to paginate your array:
Use nz-table
Use (nzPageIndexChange) and (nzPageSizeChange) methods of nz-pagination to filter your array
Related
I have been trying to fetch user comment on a blog post. The tag between which the comments lie is <div id='loadComment> ..... </div>.
So when I tried to view it through soap.prettify(), I only found <div id='loadComment> </div>. The codes in between were not displaying.
Below is the real code which I should be able to see as output
<div id = "loadComment">
<div>
<div class = "comm-cont">
<a href = "...">
................
<a class = ....> ... </a>
</a>
</div>
</div>
But the output I get using prettify() is
<div id = 'loadComment'>
</div>
I would want to fetch comments but I am not even able to view them through BeutifulSoup. Thereby, I need help from the community. Thank you in advance.
Edit:
url:
https://www.somewhereinblog.net/blog/nibhrita/30292259
I'm getting this error in console, Cannot read property '0' of undefined but still I'm getting the result as expected.
This is my HTML code
<div class="col-md-3">
<div class="slider-product">
<a href="#">
<img src="{{featureProducts[0].img_path}}" alt="Image" style="max-width:100%;">
<span class="tag">{{featureProducts[0].cat_name}}</span>
<div>
<a class="title">{{featureProducts[0].name}}</a>
</div>
<div class="price">
<i class="fa fa-inr"></i> {{featureProducts[0].min_price}}
</div>
</a>
</div>
</div>
Here is the function in typescript file
getFeatureProducts(){
this.httpClient.get(this.baseUrl+`/getFeatureProducts`)
.subscribe(
(data:any[]) => {
if(data.length) {
this.featureProducts = data;
}else{
this.featureProducts = null;
}
}
)}
featureProducts is declared inside the class as
featureProducts: any;
I know there is work around to this problem, like I can use multiple variables as below
in typescript
imgpath0 = this.featureProducts[0].imgPath;
And using this variable in html directly as
{{imgPath0}}
But this is not a better approach as I have lot of properties to be displayed in html and I cannot declare as many variables in ts.
Note: I don't want to loop using 'for' in html. Instead I need to fetch the properties as we usually do in JSON.
You can use *ngIf="featureProducts && featureProducts[0]" and prevent rendering the div until featureProducts object gets populated.
<div class="slider-product" *ngIf="featureProducts && featureProducts[0]">
<a href="#">
<img src="{{featureProducts[0].img_path}}" alt="Image" style="max-width:100%;">
<span class="tag">{{featureProducts[0].cat_name}}</span>
<div>
<a class="title">{{featureProducts[0].name}}</a>
</div>
<div class="price">
<i class="fa fa-inr"></i> {{featureProducts[0].min_price}}
</div>
</a>
</div>
I'm trying to build a "Team Member" page from JSON data.
I can create the page with basic things like firstName, lastName, position.
Each team member has their own page with a little more information
What I cant figure out is how to include the team members url to my [routerLink].
My router link would look like this which I have setup in my routes
<a [routerLink]="['./glenn']">
And this is how I'm attempting to use it
<div class="team-members" *ngFor="let teammember of teammembers" >
<div class="clearfix">
<div class="col-xs-12 col-sm-8 col-md-8 col-lg-6 team-member member-item" style="cursor: pointer;">
<a [routerLink]="['./"{{teammember.firstName}}"']">
<div class="member-pic-holder">
<img alt="" src='{{teammember.photo}}' />
<div class="member-overlay"></div>
</div>
<h4>{{teammember.firstName}}<br/>{{teammember.lastName}} <span class="fa fa-arrow-right"></span></h4>
<p class="company-position">{{teammember.position}}</p>
</a>
</div>
</div>
</div>
Any thoughts on this one please?
It's also breaking when I'm trying to include the team-members photo
<img alt="" src='{{teammember.photo}}' />
However one thing at a time!
Thanks
GWS
You are using the {{ foo.bar }} binding incorrectly, the {{ }} syntax allows you to do one way binding, what you want is to use regular js expressions when binding to your objects properties.
When binding to an html element attribute, you can use the [attr.{id|href|etc}] binding, in your case, for the href of the image you can use:
<img alt="" [attr.href] = 'teammember.photo' />
And for the router, simply use [routerLink] = "[teammember.firstName]" (not sure why you need the ./, if you do need it, you could append it using a getter on your team member class, as shown bellow.
For your routes, you could do something along the lines of:
Team Member Class
export class TeamMember {
// ...properties and constructor
private memberUrl: string = "foobar"
get MemberRoute(){
return `./${this.memberUrl}`;
}
}
Template:
<div class="team-members" *ngFor="let teammember of teammembers" >
<div class="clearfix">
<div class="col-xs-12 col-sm-8 col-md-8 col-lg-6 team-member member-item" style="cursor: pointer;">
<a [routerLink]="[teammember.MemberRoute']">
<div class="member-pic-holder">
<img [attr.href] = 'teammember.photo' />
<div class="member-overlay"></div>
</div>
<h4>{{teammember.firstName}}<br/>{{teammember.lastName}} <span class="fa fa-arrow-right"></span></h4>
<p class="company-position">{{teammember.position}}</p>
</a>
</div>
</div>
</div>
Hope this helps!
can you try like this:
['./',teammember.firstName]
for img use
<img alt="" [src]="teammember.photo" />
Newbie to angularjs.trying to display data from json nested object like this
enter image description here
my html code is
<a rel="extranal" data-val="<%rcds%>" ng-repeat="rcds in rcd" class="international" id="<%rcds.id%>">
<span><img ng-src="<% rcds.routes.subroutes %>"/> <% rcds.subroutes[0].xyz%></span>
<div class="departure-time"><% rcds.subroutes[0].abc %></div>
</a>
want to display the data subroutes in the ng-repeat based on the condition of legtype in the json.how to do this.
if you want show your object as JSON the only thing that you need is write {{rcds | json}}
Otherwise if you want to navigate your nested object you should do somethings like:
<div ng-repeat="rcds in red">
<div ng-repeat="route in rcds.routes">
<!-- route element --->
<div ng-repeat="depart in route.depart">
<!-- depart element --->
<div ng-repeat="subroute in route.subroutes">
<!-- subroute element -->
</div>
</div>
</div>
</div>
I have this code that is getting data from a cell in a table
<div class="p-s-header">TITLE</div>
<div class="p-content">
<div class="row">
<div class="col-md-12 col-xs-12 col-sm-12">
<span di="76" ></span><br />
<span di="77" ></span><br />
</div>
</div>
</div>
This is producing:
TITLE
(data in cell 76)
(DATA in cell 77)
Now, data in cell 77 is a a link that is too long for the space, so I want to add the work "Click here" (hyperlinked) instead of showing the link.
So I wanted to change code, so output looks like:
TITLE
(data in cell 76)
Click here
"Click here" shoudl be built with the data in cell 77. I didn't code this but it seems the code to get the data from that cell is:
How would I build it?
I tried a few options, but nothing seems to work:
For example something like this:
<a href=<span di="77" ></span>Link</a><br />
thanks for your help
Try this, I hope this will encourage you on studying further how HTML and JS work together. (PHP is too advanced right now).
Change your code for this:
<div class="p-s-header">TITLE</div>
<div class="p-content">
<div class="row">
<div class="col-md-12 col-xs-12 col-sm-12">
<span id="cell76" ></span><br />
<span id="cell77" >http://www.google.com</span><br />
</div>
</div>
</div>
The attribute di doesn't exist, it is id and id's cannot start with numbers or be numbers
At the bottom of the code that you added write the following:
<script>
var link = document.getElementById('cell77').innerHTML;
document.write(''+link+'');
</script>
Here is the jsfiddle
https://jsfiddle.net/cz1Ltw3x/1/