Question

让我们说我有一个自定义过滤器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)">&#10094;</a>
        <a class="nex" (click)="plusSlides(1)">&#10095;</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]
}

Answer 1

您受到Vue模板中过滤器语法的限制，因此您尝试执行的操作将无效。

在您给出的示例中，过滤器没有意义，因为它没有使用参数。

但是无论如何，要回答您的问题，我想到了两个选择：

1。定义另一个过滤器以获取第一个元素

{{ myvar | cf | first }}

export default function first(value) {
  return value[0]
}

2。手动调用过滤器功能

这将使您可以对过滤结果进行所需的操作，因为您只是像调用其他函数一样调用它。

{{ $options.filters.cf(myvar)[0] }}

Vue：过滤器返回一个数组，如何获取第一个元素

1 个答案: