如何使用ngFor Angular2在数组中显示1个元素

Question

在我的网站上，如果我的数组中有多个元素。我的模板看起来像这样。

我想要一个按钮来转到这个数组的下一个元素，只显示一组数据并使用该按钮来控制用户看到的数组中的哪个元素。

我目前的代码如下：

<div class='panel-body' *ngIf ='case'>

        <h3> Details </h3>
        <div id="left-side" *ngFor="let tag of case?.incidents ">
            <p>Date: <span class="name">{{tag.date}}</span> </p>
            <p>DCU: <span class="name">{{tag.dcu}}</span></p>
            <p>Location:<span class="name"> {{tag.location}}</span> </p>
        </div>

我正在考虑使用某种索引或ng-container或者使用ngIf或ngFor。我不确定如何实现这一点。

非常感谢所有帮助！

Answer 1

在这种情况下你不需要ngFor或ngIf。你想要的是一个变量来跟踪用户的索引，然后是一个改变该索引的函数。

<h3> Details </h3>
<div id="left-side" >
    <p>Date: <span class="name">{{case?.incidents[userIndex].date}}</span> </p>
    <p>DCU: <span class="name">{{case?.incidents[userIndex].dcu}}</span></p>
    <p>Location:<span class="name"> {{case?.incidents[userIndex].location}}</span> </p>
</div>
<button (click)="changeIndex(-1);">Previous</button>
<button (click)="changeIndex(1);">Next</button>

并在您的组件中。您将拥有：

userIndex = 0;

changeIndex(number) {
  if (this.userIndex > 0 && number < 0 ||  //index must be greater than 0 at all times
  this.userIndex < this.case?.incidents.length && number > 0 ) {  //index must be less than length of array
    this.userIndex += number;
  }

这也是其他项目的视图内寻呼系统的标准。

Answer 2

要实现此目的，您可以使用角度的默认 SlicePipe ，例如，

@Component({
  selector: 'slice-list-pipe',
  template: `<ul>
    <li *ngFor="let i of collection | slice:1:3">{{i}}</li>
  </ul>`
})
export class SlicePipeListComponent {
  collection: string[] = ['a', 'b', 'c', 'd'];
}

您可以找到更多详情here