Angular4 :如果数据源为空，如何显示表行，如“未找到记录”

Question

Angular4 :如果数据源为空，如何像"No record found“那样显示表行.Please帮助

​

​

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和覆盖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='!isLoading？"visible"：“隐藏”‘或类似的东西。

<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是一个检查真或假的简单函数。

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

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

希望帮助你的是你！