Question

我有两张表，一张是车辆和公司。如果我点击车辆名称，其相应的公司名称显示在公司表中。那么，现在我有大约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;
}

在这个链接的答案的帮助下，我能够得到我的要求： Scroll Top in angular2

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

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

Answer 1

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

使用锚标记
将tabindex属性添加到非输入元素

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

＆＃13;

import --> AfterViewInit

 export class YourComponent implements AfterViewInit {
   @ViewChild('companyTable') vc: any;


  ngAfterViewInit() {
    this.vc.nativeElement.focus();
  }
}

＆＃13;

<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>

＆＃13;

Answer 2

我不明白为什么按下车辆应该专注于公司排。不应该点击车辆行在逻辑上引导您进入车辆详细信息页面吗？

如果您在车辆对象上有公司名称，则可以。

在公司列表中

  <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
         <span id="{{company.companyName}}">{{company.companyName}}/span>
   </div>

在车辆清单中。添加一个直接显示componyname的新锚点。按此链接可启动滚动到公司表

<a href="#{{vehicle.companyName}}">{{vehicle.companyName}}</a>

您还可以在车辆列表中的公司锚点上添加一个小浮动div，以显示最重要的公司数据。所以你不需要把注意力从车辆清单上移开。首先，当您单击锚点时，您应该离开

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

2 个答案: