Question

我有一个响应表，它只是一个引导响应表。看起来像这样：

<div class="table-responsive" *ngIf="rows">
  <table class="table table-borderliness table-product">
    <tbody>
      <ng-container *ngFor="let row of rows">
        <tr class="d-flex">
          <td class="d-flex align-items-center justify-content-center col" [class.table-active-primary]="column.class"
            *ngFor="let column of row.columns; let i = index" [scope]="i ? '' : 'row'">
            <div [ngSwitch]="row.description.length && !i">
              <span *ngSwitchCase="0">{{ column.name }}</span>
              <span *ngSwitchDefault>
                <button class="btn btn-link btn-block" (click)="showDescription(column.name, row)">
                  <span class="float-left">{{ column.name }}</span>
                  <fa-icon class="float-right" [icon]="['far', 'plus-square']" *ngIf="row.state === 'out'">
                  </fa-icon>
                  <fa-icon class="float-right" [icon]="['far', 'minus-square']" *ngIf="row.state === 'in'">
                  </fa-icon>
                </button>
              </span>
            </div>
          </td>
        </tr>
        <tr class="d-flex descriptions" [@animateRow]="row.state">
          <td class="col" scope="row" [innerHtml]="row.description"
            *ngIf="row.description && descriptions.indexOf(row.columns[0].name) > -1"></td>
        </tr>
      </ng-container>
    </tbody>
  </table>
</div>

然后在此上方我有一个带有一些按钮的标题：

<div class="col">
  <h1 class="float-left">How they compare</h1>
  <div class="btn-group" role="group" aria-label="Basic example">
    <button class="btn btn-link btn-lg" (click)="scrollLeft()">
      <fa-icon [icon]="['far', 'caret-square-left']"></fa-icon>
    </button>
    <button class="btn btn-link btn-lg" (click)="scrollRight()">
      <fa-icon [icon]="['far', 'caret-square-right']"></fa-icon>
    </button>
  </div>
</div>

我想做的是，使向左按钮向左水平滚动表格（在开始时为右时禁用），向右按钮向右滚动（在结束时为禁用）。

我不知道如何在Angular中做到这一点；在AngularJs中，我可以;）有人可以帮忙吗？

经过一番研究，我发现我可以使用@ViewChild来定位我的桌子，所以我做到了：

@ViewChild('productTable') productTable;

scrollLeft(): void {
  if (!this.productTable.nativeElement) return;
  this.productTable.nativeElement.scrollLeft -= 10;
}

scrollRight(): void {
  if (!this.productTable.nativeElement) return;
  this.productTable.nativeElement.scrollLeft += 10;
}

这种类型的作品，但我想我需要将其从单击更改为:)也许看看它是否生涩或光滑

通过按钮按下角度7滚动水平表

0 个答案: