Angular有条件地更改单元格值。

huangapple
go评论87阅读模式
英文:

Angular change Cell Value Conditionally

问题

我有一个显示这些数据的表格，我想根据单元格的值来更改表格数据，如果单元格的值为1，我想显示勾号，否则显示单元格的值。
你能帮助我吗？

  1. <ng-container matColumnDef="Monday">
  2.     <th mat-header-cell *matHeaderCellDef> M </th>
  3.     <td mat-cell *matCellDef="let element" [ngClass]="{'make-tick': element.Monday == '1'}"
  4.         [ngClass]="{'make-gold': element.Monday == '0'}"> {{ element.Monday}} </td>
  5. </ng-container>
英文:

I have a grid displaying this data, I want to change the table data based upon cell value if cell values are 1 I have to display tick mark else cell value
can you please help me

  1. &lt;ng-container matColumnDef=&quot;Monday&quot;&gt;
  2.     &lt;th mat-header-cell *matHeaderCellDef&gt; M &lt;/th&gt;
  3.     &lt;td mat-cell *matCellDef=&quot;let element&quot; [ngClass]=&quot;{&#39;make-tick&#39;: element.Monday == &#39;1&#39;}&quot;
  4.         [ngClass]=&quot;{&#39;make-gold&#39;: element.Monday == &#39;0&#39;}&quot;&gt; {{ element.Monday}} &lt;/td&gt;
  5. &lt;/ng-container&gt;

答案1

得分: 1

你可以使用简单的*ngIf来实现这个功能。

  1. <ng-container matColumnDef="Monday">
  2.   <th mat-header-cell *matHeaderCellDef> M </th>
  3.   <td mat-cell *matCellDef="let element" [ngClass]="{'make-tick': element.Monday == '1', 'make-gold': element.Monday == '0'}">
  4.     <ng-container *ngIf="element.Monday != '1'; else tick">
  5.       {{element.Monday}}
  6.     </ng-container>
  7.     <ng-template #tick><!-- 打勾的标记 --></ng-template>
  8.   </td>
  9. </ng-container>
英文:

You can use a simple *ngIf to do that.

  1. &lt;ng-container matColumnDef=&quot;Monday&quot;&gt;
  2.   &lt;th mat-header-cell *matHeaderCellDef&gt; M &lt;/th&gt;
  3.   &lt;td mat-cell *matCellDef=&quot;let element&quot; 
  4.       [ngClass]=&quot;{&#39;make-tick&#39;: element.Monday == &#39;1&#39;, &#39;make-gold&#39;: element.Monday == &#39;0&#39;}&quot;&gt;
  5.     &lt;ng-container *ngIf=&quot;element.Monday != &#39;1&#39;; else tick&quot;&gt;
  6.       {{element.Monday}}
  7.     &lt;/ng-container&gt;
  8.     &lt;ng-template #tick&gt;&lt;!-- markup for tick --&gt;&lt;/ng-template&gt;
  9.   &lt;/td&gt;
  10. &lt;/ng-container&gt;

huangapple
  • 本文由 发表于 2020年1月6日 19:21:53
  • 转载请务必保留本文链接：https://go.coder-hub.com/59611221.html
  • angular
  • angular-material
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定