仅在满足某些条件时才显示行答案

【问题标题】：Display row only if certain conditions are met仅在满足某些条件时才显示行
【发布时间】：2019-08-06 09:59:19
【问题描述】：

我是实习生，我需要一些帮助。

我有一个 ngx-datatable，我想在满足条件时显示行。我该怎么做？例如，如果覆盖的国家是美国，我显示，如果不是，我没有。

<ngx-datatable class="table-zenmoov" [columnMode]="'force'" [rows]="rows" [rowHeight]="'auto'"
      [headerHeight]="'auto'" [footerHeight]="'auto'" [externalPaging]="true" [count]="paginationInfo.totalElements"
      [loadingIndicator]="loadingIndicator"
      [offset]="paginationInfo.currentPage" [limit]="paginationInfo.pageSize" (page)="setTablePage($event)"
      (sort)="onSort($event)">

      <ngx-datatable-column name="Name" [prop]="'first_name'" [sortable]="true">
        <ng-template let-row="row" ngx-datatable-cell-template>
          <div class="user-wrap">
            <div class="zenmoov-vendor" [style.background]="row.company_id?'#f0ad4e':'#5bc0de'"></div>
            <div class="img-circle img-wrapper vendor-avatar">
              <img *ngIf="row.avatar_url" [src]="row?.avatar_url " alt="logo">
            </div>
            <ng-container *ngIf="auth.userRID=='admin'">
              <a [routerLink]="['../../vendor/',row._id]">{{ row?.first_name }} {{ row?.last_name }}</a>
            </ng-container>
            <ng-container *ngIf="auth.userRID=='hr'">
              <a [routerLink]="['../../../vendor/',row._id]">{{ row?.first_name }} {{ row?.last_name }}</a>
            </ng-container>
            <ng-container *ngIf="auth.userRID=='talent'">
              <a [routerLink]="['/talent/vendor/',row._id]">{{ row?.first_name }} {{ row?.last_name }}</a>
            </ng-container>
          </div>
        </ng-template>
      </ngx-datatable-column>

      <ngx-datatable-column name="Company" [sortable]="false">
        <ng-template let-row="row" ngx-datatable-cell-template>
          {{ row?.company_name }}
        </ng-template>
      </ngx-datatable-column>
</ngx-datable class>

【问题讨论】：

您能否提供包含在rows 变量中的对象结构？
为什么不在数据上使用管道（在 TS 中）？

标签： html angular datatable ngx-bootstrap

【解决方案1】：

你可以在html元素上使用*ngIf，只有满足条件才会显示。

【讨论】：

我从未使用过ngx-datatable，但这对我来说不是一个好的解决方案，因为如果他使用某种分页（看起来像这样），它可能会搞砸。理想情况下，他应该先过滤数据集，然后再将其交给ngx-datatable 组件。

【解决方案2】：

我从未使用过ngx-datatable，但是，快速浏览一下文档和您的代码，我想我明白了。我想[rows]="rows" 这个位是您将数据提供给数据表的地方，您需要做的是过滤掉您不想在数据表中出现的对象，例如在您的 TypeScript 文件中：

TypeScript 文件

// Array of strings that contains all countries in America
const americaCountries = [...];
// Iterate over each row and verify if the country of that row is in the array americaCountries
// If it is, that row is added to a new array named americaRows
this.americaRows = this.rows.filter(row => americaCountries.includes(row.country));

HTML 文件

[rows]="americaRows"

请记住，这是伪代码，因为我不知道您的 TypeScript 代码和 rows 对象结构。

【讨论】：