开发者问题收集

如果值为空,如何使用 Ng if 更改数据表背景颜色

2020-05-21
1074

伙计们,如果对象的值 == 0,我需要更改我的行数据表颜色,我知道在正常情况下如何做到这一点,但在这里我使用编程行定义(我应该用它来分组)

所以我试过那段代码:

模板:

<mat-table [dataSource]="dataSource" class="mat-elevation-z8">

            <ng-container *ngFor="let column of columns; let i = index" matColumnDef="{{ column.field }}">
              <mat-header-cell *matHeaderCellDef (click)="SortWith($event,column)">{{ column.field }}


              </mat-header-cell>
            <mat-cell *matCellDef="let row">
                <div *ngIf="{{row.RemainingQuantities}} == 25; else redBack">
                      <div class="red">
                        {{ row[column.field] }}
                      </div>
                </div>
                <ng-template #redBack>
                    <div>
                        {{ row[column.field] }}
                    </div>
                </ng-template>
            </mat-cell>
            </ng-container>

              <mat-header-row mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
              <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>

              <!-- Group header -->
              <ng-container matColumnDef="groupHeader">
                  <mat-cell colspan="999" *matCellDef="let group">
                <mat-icon *ngIf="group.expanded">expand_less</mat-icon>
                <mat-icon *ngIf="!group.expanded">expand_more</mat-icon>
                      <strong>{{groupByColumns[group.level-1]}} = {{group[groupByColumns[group.level-1]]}} ({{group.totalCounts}})</strong>
                </mat-cell>
            </ng-container>

            <mat-row *matRowDef="let row; columns: ['groupHeader']; when: isGroup" (click)="groupHeaderClick(row)"> </mat-row>

          </mat-table>

我的 component.ts:

this.columns = [{
      field: 'Category'
    },  {
      field: 'Model'
    },  {
      field: 'Reference'
    },  {
      field: 'Name'
    },  {
      field: 'RemainingQuantities'
    },  {
      field: 'Department.Name'
    },  {
      field: 'Supplier.Name'
    }];
    this.displayedColumns = this.columns.map(column => column.field);
    this.groupByColumns = ['Category'];
 columnsToDisplay: string[] = ['Category', 'Model', 'Reference', 'Name', 'RemainingQuantities', 'Department.Name', 'Supplier.Name'];
   SortedColumns: string[] = [];
    this.service.get_product().subscribe((result : any)=>{
      this.listdata = result;

      this.decompersed = decrypt(result);
      console.log(this.decompersed);
      this.ProductList = this.decompersed;
      this.dataSource.data = this.addGroups(this.ProductList, this.groupByColumns);
      this.dataSource.filterPredicate = this.customFilterPredicate.bind(this);
      this.dataSource.filter = performance.now().toString();

但是我发现了那个错误:

Uncaught Error: Template parse errors: TypeError: Cannot read property 'toUpperCase' of undefined ("at-header-cell> ]*ngIf="{{row.RemainingQuantities}} == 25; else redBack"> "): Soo Guys I need to test if the row of field RemainingQuantities == 0 and change it color to red.

2个回答

除了 *ngIf ,您还可以使用 [class]

<mat-cell *matCellDef="let row">
   <div [className]="row.RemainingQuantities == 25 ? 'red' : 'redBack'">
      {{ row[column.field] }}
   </div>
</mat-cell>
Adrien PESSU
2020-05-21

如果是一行,您也可以使用 mat-row。我使用 [style.background-color],但正如 Adrien 所说,您可以使用 [className] 或 [ngClass]。

<tr mat-row *matRowDef="let row; columns: displayedColumns;" 
      [style.background-color]="!row.RemainingQuantities?'red':null"></tr>
Eliseo
2020-05-21