[英]how to implement a multi item slider in angular?
我正在尝试在角度7中实现一个多项目滑块。当我在html中使用静态数据时工作正常但当我尝试使用ngFor动态地实现相同的角度然后在第一页中它不是显示任何东西，但当我滑到下一张幻灯片时，它工作得很好。
这是html中包含静态数据的代码
HTML： -
<div class=" container-fluid news-slider">
<div class="row mySlides fad">
<div class=" col-xl-2 col-lg-2 col-md-2 col-sm-2 newsitem">
<mat-card class="insidecard newscard">
<img mat-card-image src="../../assets/img/download.jpg" class="newsimage">
<mat-card-content>
<div class="newsdetails">
The Shiba Inu is the smallest of the six original and distinct spitz breeds of dog from Japan.
A small, agile dog that copes very well with mountainous terrain, the Shiba Inu was originally
bred for hunting.
</div>
</mat-card-content>
</mat-card>
</div>
<div class=" col-xl-2 col-lg-2 col-md-2 col-sm-2 newsitem">
<mat-card class="insidecard newscard">
<img mat-card-image src="../../assets/img/download.jpg" class="newsimage">
<mat-card-content>
<div class="newsdetails">
The Shiba Inu is the smallest of the six original and distinct spitz breeds of dog from Japan.
A small, agile dog that copes very well with mountainous terrain, the Shiba Inu was originally
bred for hunting.
</div>
</mat-card-content>
</mat-card>
</div>
<div class=" col-xl-2 col-lg-2 col-md-2 col-sm-2 newsitem">
<mat-card class="insidecard newscard">
<img mat-card-image src="../../assets/img/download.jpg" class="newsimage">
<mat-card-content>
<div class="newsdetails">
The Shiba Inu is the smallest of the six original and distinct spitz breeds of dog from Japan.
A small, agile dog that copes very well with mountainous terrain, the Shiba Inu was originally
bred for hunting.
</div>
</mat-card-content>
</mat-card>
</div>
<div class=" col-xl-2 col-lg-2 col-md-2 col-sm-2 newsitem">
<mat-card class="insidecard newscard">
<img mat-card-image src="../../assets/img/download.jpg" class="newsimage">
<mat-card-content>
<div class="newsdetails">
The Shiba Inu is the smallest of the six original and distinct spitz breeds of dog from Japan.
A small, agile dog that copes very well with mountainous terrain, the Shiba Inu was originally
bred for hunting.
</div>
</mat-card-content>
</mat-card>
</div>
<div class=" col-xl-2 col-lg-2 col-md-2 col-sm-2 newsitem">
<mat-card class="insidecard newscard">
<img mat-card-image src="../../assets/img/download.jpg" class="newsimage">
<mat-card-content>
<div class="newsdetails">
The Shiba Inu is the smallest of the six original and distinct spitz breeds of dog from Japan.
A small, agile dog that copes very well with mountainous terrain, the Shiba Inu was originally
bred for hunting.
</div>
</mat-card-content>
</mat-card>
</div>
<div class=" col-xl-2 col-lg-2 col-md-2 col-sm-2 newsitem">
<mat-card class="insidecard newscard">
<img mat-card-image src="../../assets/img/download.jpg" class="newsimage">
<mat-card-content>
<div class="newsdetails">
The Shiba Inu is the smallest of the six original and distinct spitz breeds of dog from Japan.
A small, agile dog that copes very well with mountainous terrain, the Shiba Inu was originally
bred for hunting.
</div>
</mat-card-content>
</mat-card>
</div>
</div>
<a class="pre" (click)="plusSlides(-1)">❮</a>
<a class="nex" (click)="plusSlides(1)">❯</a>
</div>
CSS:-
.news-slider{
position: relative;
}
.mySlides{
display: none;
}
.pre,.nex{
cursor: pointer;
position: absolute;
top:50%;
width: auto;
padding: 16px;
margin-top: -22px;
color:red;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
background-color:white;
box-shadow: 1px 2px 10px -1px rgba(0,0,0,.3);
}
.nex {
right: 0;
border-radius: 3px 0 0 3px;
margin-right: 0px;
}
.pre{
margin-left:-15px;
}
.fad {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
Angular:-
export class MainpageComponent implements OnInit {
slideIndex = 1;
parent = document.getElementsByClassName("mySlides");
constructor(config : NgbCarouselConfig,public httpclient:HttpClient,private renderer:Renderer2) {
config.interval = 2000;
config.wrap = true;
config.keyboard = false;
config.pauseOnHover = true;
}
ngOnInit() {
this.showSlides(this.slideIndex);
}
showSlides(n)
{
var i;
if(n>this.parent.length)
{
this.slideIndex = 1;
}
if(n<1)
{
this.slideIndex = this.parent.length;
}
for(i=0;i<this.parent.length;i++)
{
this.renderer.setStyle(this.parent[i],'display','none');
}
this.renderer.setStyle(this.parent[this.slideIndex-1],'display','flex');
console.log(this.parent[0]);
}
plusSlides(n)
{
this.showSlides(this.slideIndex += n);
}
}
这是我用于动态显示的代码
HTML:-
```
<div class=" container-fluid news-slider">
<div class="row mySlides fad" *ngFor="let newsarray of newschunk">
<div class=" col-xl-2 col-lg-2 col-md-2 col-sm-2 newsitem" *ngFor="let item of newsarray">
<mat-card class="insidecard newscard">
<img mat-card-image [src]="item.img" class="newimage">
<mat-card-content>
<div class="newsdetails">
{{item.description}}
</div>
</mat-card-content>
</mat-card>
</div>
</div>
<a class="pre" (click)="plusSlides(-1)">❮</a>
<a class="nex" (click)="plusSlides(1)">❯</a>
</div>
CSS:-
.news-slider{
position: relative;
}
.mySlides{
display: none;
}
.pre,.nex{
cursor: pointer;
position: absolute;
top:50%;
width: auto;
padding: 16px;
margin-top: -22px;
color:red;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
background-color:white;
box-shadow: 1px 2px 10px -1px rgba(0,0,0,.3);
}
.nex {
right: 0;
border-radius: 3px 0 0 3px;
margin-right: 0px;
}
.pre{
margin-left:-15px;
}
.fad {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
ANGULAR:-
export class MainpageComponent implements OnInit {
slideIndex = 1;
parent = document.getElementsByClassName("mySlides");
public newsdata = [
{
title: 'Card Title 1',
description: 'Some quick example text to build on the card title and make up the bulk of the card content',
buttonText: 'Button',
img: 'https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(34).jpg'
},
{
title: 'Card Title 2',
description: 'Some quick example text to build on the card title and make up the bulk of the card content',
buttonText: 'Button',
img: 'https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(34).jpg'
},
{
title: 'Card Title 3',
description: 'Some quick example text to build on the card title and make up the bulk of the card content',
buttonText: 'Button',
img: 'https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(34).jpg'
},
{
title: 'Card Title 4',
description: 'Some quick example text to build on the card title and make up the bulk of the card content',
buttonText: 'Button',
img: 'https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(34).jpg'
},
{
title: 'Card Title 5',
description: 'Some quick example text to build on the card title and make up the bulk of the card content',
buttonText: 'Button',
img: 'https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(34).jpg'
},
{
title: 'Card Title 6',
description: 'Some quick example text to build on the card title and make up the bulk of the card content',
buttonText: 'Button',
img: 'https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(34).jpg'
},
{
title: 'Card Title 7',
description: 'Some quick example text to build on the card title and make up the bulk of the card content',
buttonText: 'Button',
img: 'https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(34).jpg'
},
{
title: 'Card Title 8',
description: 'Some quick example text to build on the card title and make up the bulk of the card content',
buttonText: 'Button',
img: 'https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(34).jpg'
},
{
title: 'Card Title 9',
description: 'Some quick example text to build on the card title and make up the bulk of the card content',
buttonText: 'Button',
img: 'https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(34).jpg'
},
];
public newschunk:any=[[]];
constructor(config : NgbCarouselConfig,public httpclient:HttpClient,private renderer:Renderer2) {
config.interval = 2000;
config.wrap = true;
config.keyboard = false;
config.pauseOnHover = true;
}
ngOnInit() {
//this.changecol.send("yes");
this.getTopNews();
//console.log(this.newsdiv);
//console.log(this.parent[0]);
}
showSlides(n)
{
var i;
if(n>this.parent.length)
{
this.slideIndex = 1;
}
if(n<1)
{
this.slideIndex = this.parent.length;
}
for(i=0;i<this.parent.length;i++)
{
this.renderer.setStyle(this.parent[i],'display','none');
}
this.renderer.setStyle(this.parent[this.slideIndex-1],'display','flex');
console.log(this.parent[0]);
}
plusSlides(n)
{
this.showSlides(this.slideIndex += n);
}
getTopNews() {
this.httpclient.get<{message:any,errorMessage:string}>("http://localhost:3000/trendingNews").subscribe((responsedata)=>{
//this.newsdata=responsedata.message;
this.newschunk = this.getChunks(this.newsdata,6);
this.showSlides(this.slideIndex);
},(error)=>{
console.log(error);
this.renderer.setStyle(this.newsdiv[0],'display','none');
});
}
getChunks(arr,size)
{
let chunkarray = [];
for(let i=0;i<arr.length;i+=size)
{
chunkarray.push(arr.slice(i,i+size));
}
return chunkarray;
}
}
1st image with static data in html
2nd image with dynamic data from angular without sliding
3rd image when i click the next arrow
行为：
你有两件事情在继续：
问题＃1 ：您在ngOnInit中完成了这两项任务 - 在OnInit中获取数据（第1点）很好，但显示幻灯片（第2点）不起作用，因为在呈现页面之前运行了ngOnInit。
问题2 ：如果你把这两个（第1点和第2点）放在ngAfterViewInit中 - 你得到一个错误'表达在检查后改变了......“
解决方案 ：在OnInit中获取数据（点＃1）; 在渲染页面后显示幻灯片（点＃2）。 为此，我创建了一个布尔变量（如果你从rest api获取数据，它会有帮助）。
编辑（1） - 针对rest API执行此操作，将您在ngAfterViewInit中的代码传输到finally块() => { } ，如下所示：
getTopNews() { this.httpclient.get<{ message: any, errorMessage: string }>("localhost:3000/trendingNews").subscribe(
responsedata => { this.newsdata = responsedata.message;
this.newschunk = this.getChunks(this.newsdata, 3);
this.arrayUpdated = true;
}
,error => { console.log(error); this.renderer.setStyle(this.newsdiv[0], 'display', 'none'); });
/* this is the finally block */
() =>{ if (this.arrayUpdated) { this.showSlides(this.slideIndex); }}
}
如何使用 Angular 的 ngFor 实现项目重新排序/随机播放动画？
[英]How to implement item reorder/shuffle animations with Angular's ngFor?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.