Angular4：如果datasource为空，如何显示表行，如“找不到记录”

Question

Angular4：如果datasource为空，如何显示“没有找到记录”这样的表行。请帮忙

Answer 1

Use an ngIf on your table if there is no data.

<ng-template [ngIf]="!(datasourceCondition())">
          <md-cell><h1> No Record found </h1>
           </md-cell>
    </ng-template>

Answer 2

如果您希望在表格上显示完整的叠加层，并显示没有数据的消息，那么您可以尝试以下方法。

将matTable和overlay div放在一个具有相对位置的div中。现在将叠加div的位置设置为绝对值，并将其宽度和高度设置为100％。叠加div将显示覆盖整个表格。

声明布尔变量以在将数据分配给表时切换叠加层的显示。

HTML

<div class="grid-div">
  <div class="grid-overlay" [hidden]="!isNoData">
    <div class="grid-overlay-msg">
      No data msg
    </div>
  </div>
  <div class="grid-overlay" [hidden]="!isLoading">
    <div class="grid-overlay-msg">
        Loading msg
    </div>
  </div>
  <mat-table #table [dataSource]="dataSource" matSort>
    ...
  </mat-table>
</div>

CSS

.grid-div {
  position: relative;
}

.grid-overlay {
  position: absolute;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.5);
}

.grid-overlay-msg {
  text-align: center;
  margin: 40vh auto 0;
  background-color: darkgray;
  width: 200px;
  border-radius: 5px;
  font-size: 15px;
  line-height: 35px;
}

Answer 3

下面是一些示例，如果没有找到数据，希望可以帮助您隐藏数据表。您需要添加*ngIf="dataSource.data.push()"。

根据您的代码...

<div>
  <div *ngIf="!dataSource.data.push()">No past invoices found!</div>

  <md-table #table [dataSource]="dataSource" mdSort *ngIf="dataSource.data.push()">

    (... rest of your code)

  </md-table>
  (... rest of your code)
</div>

<强> 更新：

如果您使用 @ViewChild ，即对于matSort能力， * ngIf 将无法正常使用！然后你需要使用 [ngClass] =＆＃39;！isLoading？ ＆＃34;可见＆＃34;：＆＃34;隐藏＆＃34;＆＃39; 或类似的东西。

<div>
  <div *ngIf="!dataSource.data.entries()">No past invoices found!</div>

  <md-table #table [dataSource]="dataSource" mdSort [ngClass]='!isLoading ? "visible": "hidden"'>

    (... rest of your code)

  </md-table>
  (... rest of your code)
</div>

在我的情况下， isLoading 是一个检查true或false的简单函数。

然后在您的scss / css文件中，您需要添加两个类 .hidden 和 .visible

.hidden { visibility: hidden; }
.visible { visibility: visible; }

希望能帮到你！

Answer 4

在新版角材料中，您可以执行以下操作

<tr class="mat-row" *matNoDataRow>
 <td class="mat-cell" colspan="9999">
  No data matching the filter
 </td>
</tr>