Question

是否可以从该特定单元格内的其他DOM对象中引用*matCellDef值？（如果甚至有div标签等等的话）

以该代码段为例：

<mat-cell *matCellDef="let item">{{ item.id }}</mat-cell>

让我们说，如果id为奇数，则在此单元格中我想在ID旁边有一个小红点，如果偶数则为无点。我该如何解决？

我的一个主意是：

<mat-cell *matCellDef="let item; item.id % 2 ? odd=true : odd=false">
    {{ item.id }} <div *ngIf="odd">redDotDiv</div>
</mat-cell>

或将*matCellDef支票本身移到<mat-cell>标签之间（在{{ }}之间）。

但是现在我在这里，所以显然不起作用。
预先感谢

Answer 1

matCellDef用于定义行变量。您应该做的是检查ngIf中的条件：

<mat-cell *matCellDef="let item">
    {{ item.id }} <div *ngIf="item.id % 2 == 0">redDotDiv</div>
</mat-cell>

Answer 2

工作示例：）

html

<mat-table [dataSource]="dataSource" class="mat-elevation-z8">
<ng-container matColumnDef="position">
    <mat-header-cell *matHeaderCellDef> No. </mat-header-cell>
    <mat-cell *matCellDef="let element"> {{element.position}}
        <div *ngIf="element.position % 2 == 0" class="redDot"></div>
    </mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>

css

.redDot{
  height: 25px;
  width: 25px;
  background-color: red;
  border-radius: 50%;
  display: inline-block;
}

ts

  displayedColumns: string[] = ['position'];
  dataSource = [1, 2, 3, 4, 5, 6];

复杂角材料表单元格

2 个答案: