Угловое тестирование Невозможно прочитать свойство 'столбец' из неопределенного

Question

Я пытаюсь написать тестовый пример для компонента, но получаю сообщение об ошибке, так как не могу прочитать свойство 'столбец' из неопределенного. Я использую угловой 6. Я пытаюсь написать тестовый пример для компонента, но я получаю сообщение об ошибке, так как не могу прочитать свойство 'столбец' неопределенного. Я использую угловой 6.

Здесь Мой код для компонента

import { Component, Inject } from '@angular/core';
import { ICellRendererAngularComp } from 'ag-grid-angular';
import { faEdit, faTrashAlt } from '@fortawesome/free-solid-svg-icons';
import { Router } from '@angular/router';
import { MatDialog } from '@angular/material/dialog';
import { ConfirmDialogComponent } from 'src/app/common/confirm-dialog/confirm-dialog.component';

@Component({
  selector: 'ap-grid-render',
  template: `
    <div *ngIf="params.column === 'status'">
      <mat-chip *ngIf="params.value === 'In progress'" color="primary" selected>
        {{ params.value }}
      </mat-chip>
      <mat-chip *ngIf="params.value === 'Approved'" color="accent" selected>
        {{ params.value }}
      </mat-chip>
      <mat-chip *ngIf="params.value === 'Rejected'" color="warn" selected>
        {{ params.value }}
      </mat-chip>
    </div>
    <div *ngIf="params.column === 'edit'">
      <button
        mat-icon-button
        color="accent"
        matTooltip="Edit request"
        matTooltipPosition="above"
        (click)="goToEdit()"
      >
        <fa-icon [icon]="faEdit"></fa-icon>
      </button>
      <button
        mat-icon-button
        color="accent"
        matTooltip="Delete"
        matTooltipPosition="above"
        (click)="deleteDomain()"
      >
        <fa-icon [icon]="faTrashAlt"></fa-icon>
      </button>
    </div>
  `
})
export class GridRendererComponent implements ICellRendererAngularComp {
  public params: any;
  // Icons
  faEdit = faEdit;
  faTrashAlt = faTrashAlt;

  constructor(private router: Router, public dialog: MatDialog) {}

  agInit(params: any): void {
    this.params = params;
  }

  goToEdit() {
    this.router.navigate(['./n-access-request']);
  }

  deleteDomain() {
    this.dialog.open(ConfirmDialogComponent, {
      panelClass: '_small-dialog',
      disableClose: true,
      position: { top: '50px' },
      data: {
        title: 'Delete Domain',
        description: `Are you sure do you want to delete domain Contract ID: ${
          this.params.data.contactId
        }?`
      }
    });
  }

  refresh(params: any) {
    this.params = params;
    return true;
  }
}

Вот код ниже для спецификации, которую я попробовал

it('agInit', () => {
    let params = {
          "column" : "status"
           };
    gridRendererComponent.agInit(params);
    expect(gridRendererComponent.params).not.toBe(null);
  });

Answer 1

Объявите тип (класс) params вместо any

 public params: Params;


 export class Params {
    public column :any
    public value :any
 }

Answer 2

Ошибка вызвана тем, что значение params не определено при попытке доступа из шаблона. Для ее решения воспользуйтесь оператором безопасной навигации ?.

Вместо

    params.column

Используйте

    params?.column

Возможно, вы захотите изменить params.value на params?.value, иначе это также приведет к ошибке.