cannot set optional property to null

Question

I have a model class, where I defined an optional property like this:

 export class Workflow { constructor( public id: number, public started: Date, public documentId: number, public document: Document, public status: WorkflowStatus, public workflowEvents: WorkflowEvent[], public startingUserId: number, public statusValue?: string, ) {} }

I have a pipe too, which transforms the status propery to a string:

 import { Pipe, PipeTransform } from '@angular/core'; import { WorkflowStatus } from '../models/workflowstatus.enum'; @Pipe({ name: "status" }) export class WorkflowStatusPipe implements PipeTransform { public transform(value: WorkflowStatus): string { switch (value) { case WorkflowStatus.ForwardedToApprover: return "TOV"; case WorkflowStatus.ReadedByApprover: return "OLV"; case WorkflowStatus.Commented: return "MEGJ"; case WorkflowStatus.Approved: return "JÓV"; case WorkflowStatus.ForwardedToManager: return "MAN"; } } }

Then I have document objects. To each document we can have a workflow. I get the documents via api:

 this.documentRepo.getDocuments().subscribe(documents => { documents.forEach(function (document) { document.workflow.statusValue = new WorkflowStatusPipe().transform(document.workflow?.status); }); this.documents = documents; });

As you see, I'm trying to transform the status value to a string, if there is a workflow. But I get in the console this error: 'Cannot set property 'statusValue' of null'.

I don't really unterstand, why, because I set the statusValue property to an optional property.

How should I modify the code?

EDIT:

this is a document object from the result of getDocuments:

Another weird thing: if I just simply assign a nonsense string to the statusValue like this, I get the same error:

 this.documentRepo.getDocuments().subscribe(documents => { documents.forEach(function (document) { document.workflow.statusValue = "x";//new WorkflowStatusPipe().transform(document.workflow?.status); }); this.documents = documents; });

Answer 1

I think you just need to handle the case where property document.workflow does not exist or is null. Set a default workflow value to documents with no workflow or simply skip the processing in documents with no workflow, something like

this.documentRepo.getDocuments().subscribe(documents => {
  documents.forEach(function (document) {
    if (document.workflow) {
      document.workflow['statusValue'] = new WorkflowStatusPipe().transform(document.workflow?.status);
    }
  });
  this.documents = documents;
});

Notice also if document.workflow.status is not of the values considered in your switch statement you will get undefined as result. Depending on what you expect there you may want to add a default case to return a different value.