typescript 在 ngFor 中以 angular2 显示更多按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/42708092/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Show more button in ngFor in angular2
提问by DingDong
I have a list of over 50 items. I would like to show only the first 10 items, and I would have a button that when clicked shows the next 10 items, and which clicked again, the next 10 items until all is shown.
我有一个包含 50 多个项目的清单。我只想显示前 10 个项目，并且我会有一个按钮，单击该按钮时会显示接下来的 10 个项目，再次单击时会显示接下来的 10 个项目，直到全部显示为止。
<ul class="results-main-content">
<li class="right-results-section">
<ul class="_result-list">
<li class="result" *ngFor="let searchResult of searchResults">
{{searchResult.name}}
</li>
</ul>
</li>
<li class="showmore">
<button class="show-more">
<img class="more" src="_arrow-down.svg" alt="" />
</button>
</li>
</ul>Is this possible to achieve in angular2?
这可以在 angular2 中实现吗？
If so, please enlighten me and the SO community.
如果是这样，请启发我和 SO 社区。
Thanks
谢谢
采纳答案by Aravind
You should use the below code
你应该使用下面的代码
import {Component, NgModule} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
@Component({
selector: 'my-app',
template: `
<div>
<h2>Hello {{name}}</h2>
<ul class="results-main-content">
<li class="right-results-section">
<ul class="_result-list">
<li class="result" *ngFor="let item of content">
{{item.colorName}}
</li>
</ul>
</li>
<li class="showmore">
<button class="show-more" (click)="getData()" [disabled]="counter>=content.length">
Show more
</button>
</li>
</ul>
</div>
`,
})
export class App {
name:string;
data = [...]; // refer plunker
content:any[]=new Array();
counter:number;
constructor() {
this.counter=0;
this.getData();
this.name = 'Angular2'
}
getData(){
console.log(this.counter + 'dat size'+this.data.length)
for(let i=this.counter+1;i<this.data.length;i++)
{
this.content.push(this.data[i]);
if(i%10==0) break;
}
this.counter+=10;
}
}
@NgModule({
imports: [ BrowserModule ],
declarations: [ App ],
bootstrap: [ App ]
})
export class AppModule {}
回答by Günter Z?chbauer
You can use the slice pipe:
您可以使用切片管道：
show = 5;
<li *ngFor="let searchResult of searchResults|slice:0:show let i=index">
{{searchResult.name}}
<button *ngIf="i==4 && show == 5" (click)="show = searchResults.length">More</button>
</li>
See also
也可以看看
回答by Vaibhav Chawla
By modifying Günter Z?chbauer code, you can achieve this by looking at this example
通过修改Günter Z?chbauer代码，看这个例子就可以实现
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: `
<ul>
<li *ngFor="let tag of tags | slice:0:show; let i=index">
<a href="#" class="span-tag tag">{{ tag }}</a>
</li>
<div *ngIf="show < tags.length" (click)="increaseShow()">DropDown Button</div>
</ul>
`,
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
name = 'Angular';
show = 10;
tags = ['a','b','c','d','e','f','g','h','i','j','a','b','c','d','e','f','g','h','i','j', 'a','b','c','d','e','f','g','h','i','j','a','b','c','d','e','f','g','h','i','j', 'a','b','c','d','e','f','g','h','i','j'];
increaseShow() {
this.show += 10;
}
}
