当使用angular2在table1中单击元素时,如何将元素集中在table2中

Question

我有2个表,一个是车辆和公司.如果我点击车辆名称,其相应的公司名称将显示在公司表中.所以,现在我有大约12辆车,当我点击第12辆车时,它的名字显示在公司表上,只有当我向上滚动时才能看到.所以我需要直接关注公司名称而不是滚动.请帮忙

这是我的车辆和公司的HTML代码:

车辆表:

<md-card *ngFor="let vehicle of vehicleLists | companyfilter:filter" (click)="goToCompany(vehicle)">
 <div >
    {{vehicle.vehicleName}}
  </div> 
   </md-card>

公司表:

<md-card  *ngFor="let company of companyLists | vehiclefilter:myfilter">
 <div>
     {{company.companyName}}
 </div></md-card>

TS代码:

goToCompany(vehicle){
this.document.body.scrollTop = 0;
}

在这个链接的答案的帮助下,我能够得到我的要求: 在angular2中滚动顶部

但是,这里它仅适用于滚动顶部,如果公司名称列表低于vwhicle名称,它不会下降.我也需要我的移动响应工作,在这个plunker它工作正常,biut不是我的代码.

Plunker链接:https://plnkr.co/edit/ZjZApeGBk1P6OamYv21T?p = preview 请帮助.

Answer 1

您可以使用以下方法实现非输入元素的焦点功能

1. 使用锚标签
2. 向非输入元素添加 tabindex 属性

您可以使用 @Viewchild 和 Renderer 或 ElementRef 访问 Angular 2 中的非输入元素

import --> AfterViewInit

 export class YourComponent implements AfterViewInit {
   @ViewChild('companyTable') vc: any;


  ngAfterViewInit() {
    this.vc.nativeElement.focus();
  }
}

<md-card class="col-lg-12 col-md-12 col-sm-12 col-xs-12" *ngFor="let company of companyLists | vehiclefilter:myfilter">
 <div #companyTable tabindex="0" class="col-lg-4 col-md-4 col-sm-4 col-xs-4" style="text-overflow: ellipsis;overflow: hidden;">
     {{company.companyName}}
 </div></md-card>