让我们说我有一个自定义过滤器cf.js,它需要在这样的数组中返回多个值:
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
在我的Vue文件中,如何仅显示第一个元素?我以为下面的方法会起作用,但它们不起作用
export default (value) => {
var a = 5
var b = 3
return [a, b]
}
答案 0 :(得分:4)
您受到Vue模板中过滤器语法的限制,因此您尝试执行的操作将无效。
在您给出的示例中,过滤器没有意义,因为它没有使用参数。
但是无论如何,要回答您的问题,我想到了两个选择:
1。定义另一个过滤器以获取第一个元素
{{ myvar | cf | first }}
export default function first(value) {
return value[0]
}
2。手动调用过滤器功能
这将使您可以对过滤结果进行所需的操作,因为您只是像调用其他函数一样调用它。
{{ $options.filters.cf(myvar)[0] }}