时间戳

首页 > 解决方案 > 触发下一个 JSON 项

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>

我的路线：

const routes: Routes = [
  {
    path: '',
    component: ItemComponent,
    children: [
      { path: '', redirectTo: 'list' },
      { path: 'list', component: ListViewComponent},
      { path: ':id', component: DetailsViewComponent }
    ]
  }
];

在我的详细信息组件中：

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;
        });
      });
  }

标签： typescriptangular6

解决方案

我假设您有一个父组件和一个详细信息。

要将信息传递给父组件，您可以使用 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>

您的新细节组件类：

@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);
      }
}

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

推荐阅读