Typescript 触发下一个JSON项

我有一个主要组件，它有一个过滤器，并加载一个项目列表。 单击其中一个项目，将加载“我的详图”组件。现在，我想在我的详图组件中创建一个按钮，以切换到下一个或上一个项目

有人能给我指出正确的方向吗

main.component.html中的我的列表：

<table class="table table-striped">
   <thead>
     <tr>
       <td><strong>Nr</strong></td>
       <td><strong>Name</strong></td>
     </tr>
   </thead>
   <tbody style="overflow:scroll;">
      <tr routerLink="./{{item.id}}" <!-- this goes to my detail-component -->
          ngFor="let item of listItems; let i = index;"
          (click)="setClickedRow(i)"
          [class.active]="i == selectedRow">
          <td >{{item.number}}</td>
          <td>{{item.description}}</td>
      </tr>
    </tbody>
  </table>

<div class="col-sm-9 col-pd-ow grid-wo">
    <div class="row">
      <div class="col-sm-12 col-pd-ow">

        <!-- List view component -->
        <router-outlet></router-outlet>
      </div>
    </div>
  </div>

在“我的详细信息”组件中：

export class DetailsViewComponent implements OnInit, OnDestroy {

  subscription: Subscription;
  public id: number;
  public item = new Item();

  constructor(private route: ActivatedRoute, private itemService: ItemService) {}

  ngOnInit() {
    this.route.params.subscribe(
      params => {
        this.id = params['id'];
        this.itemService.get(this.id).subscribe(item => {
          this.item = item;
        });
      });
  }

---

我假设您有一个父组件和一个细节组件

要将信息传递给父组件，可以使用EventEmitter，但必须创建两个不同的组件，如下所示：

MainComponent.html：

<table class="table table-striped">
   <thead>
     <tr>
       <td><strong>Nr</strong></td>
       <td><strong>Name</strong></td>
     </tr>
   </thead>
   <tbody style="overflow:scroll;">
      <details-component ngFor="let item of listItems; let i = index;"
          (click)="setClickedRow(i)"   
          [class.active]="i == selectedRow"
          [index]="i"
          [itemId]="{{item.id}}"
          [description]="{{item.description}}"
          (selectSibling)="setClickedRow(siblingNumber)">
      </details-component>
    </tbody>
  </table>

Nr
名称

您的新详图构件类：

@Component({
    selector: 'details-component',
    templateUrl: 'details-component.html'
})
export class DetailsViewComponent implements OnInit, OnDestroy {

  @Output() selectSibling: EventEmitter<number> = new EventEmitter<number>();

  @Input() index: number;
  @Input() description: string;
  @Input() itemId: string;

  subscription: Subscription;
  public item = new Item();

  constructor(private route: ActivatedRoute, private itemService: ItemService) {}

     ngOnInit() {
       this.itemService.get(this.itemId).subscribe(item => {
          this.item = item;
        });
      }

      selectNextSibling(): void {
         this.selectSibling.emit(this.index+1);
      }

      selectPreviousSibling(): void {
        this.selectSibling.emit(this.index-1);
      }
}

@组件({
选择器：“详细信息组件”，
templateUrl:'details component.html'
})
导出类DetailsViewComponent实现OnInit、OnDestroy{
@Output（）选择同级：EventEmitter=neweventemitter（）；
@Input（）索引：数字；
@Input（）说明：字符串；
@Input（）itemId:string；
认购：认购；
公共项=新项（）；
构造函数（私有路由：ActivatedRoute，私有itemService:itemService）{}
恩戈尼尼特（）{
this.itemService.get（this.itemId）.subscribe（item=>{
this.item=项目；
});
}
选择nextsibling（）：void{
this.selectSibling.emit（this.index+1）；
}
selectPreviousSibling（）：void{
this.selectSibling.emit（this.index-1）；
}
}

---

您必须在单击相应的箭头时触发selectNextSibling和selectPreviousSibling，并在setClickedRow（）方法中执行正确的数组边界检查：）

谢谢您的输入！我的列表在我的主组件中，而不是在我的细节组件中。不用担心：）这不是我实现的吗？

@Component({
    selector: 'details-component',
    templateUrl: 'details-component.html'
})
export class DetailsViewComponent implements OnInit, OnDestroy {

  @Output() selectSibling: EventEmitter<number> = new EventEmitter<number>();

  @Input() index: number;
  @Input() description: string;
  @Input() itemId: string;

  subscription: Subscription;
  public item = new Item();

  constructor(private route: ActivatedRoute, private itemService: ItemService) {}

     ngOnInit() {
       this.itemService.get(this.itemId).subscribe(item => {
          this.item = item;
        });
      }

      selectNextSibling(): void {
         this.selectSibling.emit(this.index+1);
      }

      selectPreviousSibling(): void {
        this.selectSibling.emit(this.index-1);
      }
}