i am having problems with my code, is a POS and I am trying to do the Sell part, but this error is keeping me for days and I don’t know how to fix it.

X [ERROR] NG2: Type 'string | null' is not assignable to type 'string | undefined'.
  Type 'null' is not assignable to type 'string | undefined'. [plugin angular-compiler]

    src/app/pages/mesa-detalle/mesa-detalle.component.html:59:84:
      59 │ ...| 'Nombre no disponible'" [subheader]="(getPrecioProducto(produ...

This is the HTML

<app-header></app-header>

<div class="content">
  <div class="card">
    <p-toast></p-toast>
    <p-toolbar>
      <div class="p-toolbar-group-left">
        <p-button label="Añadir producto" icon="pi pi-plus" (click)="abrirProductoDialogo()"></p-button>
      </div>
    </p-toolbar>

    <p-table [value]="pedidos" [paginator]="true" [rows]="10" [showCurrentPageReport]="true" currentPageReportTemplate="Mostrando {first} a {last} de {totalRecords} entradas">
      <ng-template pTemplate="header">
        <tr>
          <th>Nombre del Producto</th>
          <th>Cantidad</th>
          <th>Precio</th>
          <th>Acciones</th>
        </tr>
      </ng-template>
      <ng-template pTemplate="body" let-pedido>
        <tr>
          <td>{{ pedido.nombre }}</td>
          <td>{{ pedido.cantidad }}</td>
          <td>{{ pedido.precio | currency }}</td>
          <td>
            <p-button icon="pi pi-trash" class="p-button-rounded p-button-danger" (click)="eliminarPedido(pedido)"></p-button>
          </td>
        </tr>
      </ng-template>
    </p-table>

    <div class="p-grid">
      <div class="p-col-12">
        <div class="p-card">
          <div class="p-card-header">
            <h5>Precio Total</h5>
          </div>
          <div class="p-card-body">
            <ul>
              <li *ngFor="let pedido of pedidos">{{ pedido.nombre }}: {{ pedido.precio * pedido.cantidad | currency }}</li>
            </ul>
            <h4>Total: {{ calcularTotal() | currency }}</h4>
          </div>
          <div class="p-card-footer">
            <p-button label="Pagar" icon="pi pi-check" (click)="generarTicket()"></p-button>
          </div>
        </div>
      </div>
    </div>

    <p-dialog header="Seleccionar Producto" [(visible)]="productoDialogo" [modal]="true" [style]="{width: '70vw', height: '80vh'}">
      <div class="p-grid p-fluid">
        <div class="p-field">
          <label for="terminoBusqueda">Buscar Producto</label>
          <input id="terminoBusqueda" type="text" pInputText [(ngModel)]="terminoBusqueda" (input)="buscarProductos()"/>
        </div>
        <div class="p-col-12 p-md-6" *ngFor="let producto of productos">
          <p-card [header]="getNombreProducto(producto) || 'Nombre no disponible'" [subheader]="(getPrecioProducto(producto) | currency)">
            <button pButton label="Añadir" (click)="anadirProducto(producto)"></button>
          </p-card>
        </div>
      </div>
    </p-dialog>

  </div>
</div>

TypeScript

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { jsPDF } from 'jspdf';
import { Pedido } from "../../interfaces/Pedido";
import { Producto } from "../../interfaces/producto";
import { ProductoService } from "../../service/producto.service";
import { PedidoService } from "../../service/pedido.service";

@Component({
  selector: 'app-mesa-detalle',
  templateUrl: './mesa-detalle.component.html',
  styleUrls: ['./mesa-detalle.component.css']
})
export class MesaDetalleComponent implements OnInit {
  mesaId!: number;
  pedidos: Pedido[] = [];
  productos: Producto[] = [];
  productoDialogo = false;
  terminoBusqueda = '';

  nuevoPedido: Pedido = { nombre: '', cantidad: 0, precio: 0, mesaId: 0 };

  constructor(
    private route: ActivatedRoute,
    private productoService: ProductoService,
    private pedidoService: PedidoService
  ) {}

  ngOnInit(): void {
    this.mesaId = Number(this.route.snapshot.paramMap.get('id'));
    this.obtenerPedidos();
  }

  obtenerPedidos(): void {
    this.pedidoService.getPedidosByMesaId(this.mesaId).subscribe(
      (data) => {
        this.pedidos = data;
      },
      (error) => {
        console.error(error);
      }
    );
  }

  buscarProductos(): void {
    if (this.terminoBusqueda) {
      this.productoService.buscarProductos(this.terminoBusqueda).subscribe(
        (data) => {
          this.productos = data;
        },
        (error) => {
          console.error(error);
        }
      );
    }
  }

  abrirProductoDialogo(): void {
    this.productoDialogo = true;
    this.buscarProductos();
  }

  anadirProducto(producto: Producto): void {
    const nuevoPedido: Pedido = {
      nombre: this.getNombreProducto(producto),
      cantidad: 1,
      precio: this.getPrecioProducto(producto),
      mesaId: this.mesaId
    };

    this.pedidoService.addPedido(nuevoPedido).subscribe(
      (data) => {
        this.pedidos.push(data);
        this.productoDialogo = false;
      },
      (error) => {
        console.error(error);
      }
    );
  }

  getNombreProducto(producto: Producto): string {
    return producto.nombre ?? 'Nombre no disponible';
  }

  getPrecioProducto(producto: Producto): number {
    return producto.precio ?? 0;
  }

  calcularTotal(): number {
    return this.pedidos.reduce((total, pedido) => total + pedido.precio * pedido.cantidad, 0);
  }

  generarTicket(): void {
    const doc = new jsPDF();

    doc.setFontSize(18);
    doc.text('Ticket de Compra', 20, 20);

    doc.setFontSize(12);
    doc.text('Mesa: ' + this.mesaId, 20, 30);
    doc.text('Fecha: ' + new Date().toLocaleString(), 20, 40);

    let y = 50;
    doc.setFontSize(10);
    doc.text('Producto', 20, y);
    doc.text('Cantidad', 90, y);
    doc.text('Precio', 140, y);
    doc.text('Total', 180, y);

    y += 10;
    this.pedidos.forEach((pedido) => {
      doc.text(pedido.nombre || 'Nombre no disponible', 20, y);
      doc.text(pedido.cantidad.toString(), 90, y);
      doc.text(pedido.precio?.toFixed(2) || '0.00', 140, y);
      doc.text((pedido.precio! * pedido.cantidad).toFixed(2), 180, y);
      y += 10;
    });

    y += 10;
    doc.setFontSize(12);
    doc.text('Total a pagar: ' + this.calcularTotal().toFixed(2), 20, y);

    doc.save(`ticket_mesa_${this.mesaId}.pdf`);
  }

  eliminarPedido(pedido: Pedido): void {
    if (pedido.id !== undefined) {
      this.pedidoService.deletePedido(pedido.id).subscribe(
        () => {
          this.pedidos = this.pedidos.filter(p => p.id !== pedido.id);
        },
        (error) => {
          console.error(error);
        }
      );
    } else {
      console.error('Pedido ID is undefined');
    }
  }
}

Interface:

export interface Pedido {
  id?: number | undefined;
  mesaId: number;
  precio: number;
  cantidad: number;
  nombre: string | null;
}

I am using Angular and PrimeNG, have someone have the same error and could fix it? let me know

I am tryng to do the sell part, where you select the item and can search by name the item, but i get the error.