ngIf 在 mat-table 内的 ng-container 中

Question

我是 Angular 的新手。我有以下问题：我需要在 table 上仅显示状态 == "FINISHED" 的行。我明白为什么我的代码不能按我想要的方式工作，但无法为我找到正确的解决方案。

这是 .ts 文件：

import { Component, OnInit } from '@angular/core';

 import { TestCase } from '../test-cases/models/test-case.model';
 import { TestCaseService } from '../test-case.service';

@Component({
  selector: 'app-test-cases-view',
  templateUrl: './test-cases-view.component.html',
  styleUrls: ['./test-cases-view.component.css']
})
export class TestCasesViewComponent implements OnInit {
  testCases: TestCase[];
  displayedColumns: string[] = ['testCaseName', 'testCaseDescription','id','created','status', 'xls'];
  constructor(private testCaseService: TestCaseService) { }

  ngOnInit() {
    this.getTestCases();
  }

  postRequest(testCaseId: string):void {
    this.testCaseService.postTestResult(testCaseId);
  }

  getTestCases(): void {
    this.testCaseService.getTestCases()
      .subscribe(testCases => this.testCases = testCases);
  }

}

测试-case.model.ts 文件：

import { TestCaseParams } from './test-case-params.model';

export class TestCase {
  public testCaseName:string;
  public testCaseDescription:string;
  public parameters:TestCaseParams;
  public id:string;

  constructor () {
    this.parameters= new TestCaseParams();
  }
}

测试用例-params.model.ts

import { EditedVar } from './replacement.model';
import { FilterVar } from './filter.model';
import { OutputVar } from './output.model';

export class TestCaseParams {
  public appsCount: number;
  public algId: number;
  public product: string;
  public invokeConsolidation: boolean;
  public invokeProdStrategy: boolean;
  public filterVars: FilterVar[];
  public editedVars: EditedVar[];
  public outputVars: OutputVar[];
  public fromDate: Date;
  public toDate:Date;
}

replacement.model.ts:

export class EditedVar {
  public path:string;
  public value:string;
}

filter.model.ts:

export class FilterVar{
  public filter:string;
  public filterType:string;
  public filterValue:string;
  public varch:boolean;
}

output.model.ts:

export class OutputVar {
  public path:string;
  public alias:string;
  public type:string;
}

这是有效的 html 文件：

<div id="view-component">
  <h2>Test Cases</h2>

  *some code just don't fit in the question*

    <ng-container matColumnDef="xls">
      <th mat-header-cell *matHeaderCellDef> Xls report </th>
      <td mat-cell *matCellDef="let testCase">
        <button *ngIf = "testCase.status == 'FINISHED'" (click)="postRequest(testCase.id)">Make Excel report</button>
      </td>
    </ng-container>

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

这是我尝试做的事情：

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

    <ng-container *ngIf = "testCase.status == 'FINISHED'" matColumnDef="testCaseName">
      <th mat-header-cell *matHeaderCellDef> testCaseName </th>
      <td mat-cell *matCellDef="let testCase"> {{testCase.testCaseName}} </td>
    </ng-container>

    <ng-container *ngIf = "testCase.status == 'FINISHED'" matColumnDef="testCaseDescription">
      <th mat-header-cell *matHeaderCellDef> testCaseDescription </th>
      <td mat-cell *matCellDef="let testCase"> {{testCase.testCaseDescription}} </td>
    </ng-container>

    <ng-container *ngIf = "testCase.status == 'FINISHED'" matColumnDef="id">
      <th mat-header-cell *matHeaderCellDef> Report Id </th>
      <td mat-cell *matCellDef="let testCase"> {{testCase.id}} </td>
    </ng-container>

    <ng-container *ngIf = "testCase.status == 'FINISHED'" matColumnDef="created">
      <th mat-header-cell *matHeaderCellDef> Created </th>
      <td mat-cell *matCellDef="let testCase"> {{testCase.created | date: 'dd/MM/yyyy hh:mm:ss'}} </td>
    </ng-container>

    <ng-container *ngIf = "testCase.status == 'FINISHED'" matColumnDef="status">
      <th mat-header-cell *matHeaderCellDef> Status </th>
      <td mat-cell *matCellDef="let testCase"> {{testCase.status}} </td>
    </ng-container>

    <ng-container *ngIf = "testCase.status == 'FINISHED'" matColumnDef="xls">
      <th mat-header-cell *matHeaderCellDef> Xls report </th>
      <td mat-cell *matCellDef="let testCase">
        <button (click)="postRequest(testCase.id)">Make Excel report</button>
      </td>
    </ng-container>

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

如您所见，我不想显示任何状态不相等的行 "FINISHED"。对于此代码，我收到以下错误：

ERROR TypeError: Cannot read property 'status' of undefined at Object.eval [as updateDirectives] (TestCasesViewComponent.html:6)

我知道我需要将 let testCase 放在其他地方，所以它会在 ng-container 级别定义，但我不知道在哪里。

Answer 1

该错误是因为 testCase 是 undefined，并且在 javascript 访问属性（如 testCase.status) 在未定义的对象中将始终抛出该错误。

但是首先未定义 testCase 的原因是因为 *ngIf 将运行在方法 getTestCases()

您有两种可能的解决方案：

实例化对象；
使用另一个 *ngIf 来检查 testCase 是否未定义。

例如：

    <div *ngIf="testCase">
       <div *ngIf="testCase.status == 'FINISHED'">

       </div>
    </div>

换句话说，当你在*ngIf.

中访问它的属性时，你只需要确保testCase不是undefined

Answer 2

您可以过滤从 Observable 获得的数组并将过滤后的数组分配为数据，而不是在 mat-table 级别进行过滤：

getTestCases(): void {
  this.testCaseService.getTestCases()
    .subscribe(testCases => this.testCases = testCases.filter(({ status }) =>
      status === 'FINISHED',
  ));
}

ngIf 在 mat-table 内的 ng-container 中

ngIf in ng-container inside mat-table

angular

angular5