Unsupported expression in a two-way binding in signal

I am using Angular signals to get a list

During the initial load, because there are two nested objects, it gives me an error and it is completely logical. When I use nullish Collection Operators, the code side gives me an error and my code encounters a problem and does not run. If I do not use it, the program console is full of errors I do not know what solution to use

This picture is for when I use the sign (?) for initial null:

and this:

This picture is also for when I do not use the symbol (?) for null and everything runs correctly and even the dropdown is filled correctly, but when initializing the customerId which is empty, it gives an error in the console

I do not know what solution to use to resolve these errors.

The property that you use in the two way data binding is allowed to be undefined, but the parent object of that property must be defined. so we can use an @if condition to confirm the validity of the object (Parent) and remove the ?. conditions.

<div class="mt-3">
  @let customerInfo = summaryLoadInfoData()?.customerInfo;
  @if (customerInfo) {
    <p-dropdown  
      [filter]="true"
      [(ngModel)]="customerInfo.customerId"
      ...
    />
  }
</div>

If you are sure that customerInfo will not be undefined then use the Non-null Assertion Operator ! to bypass this error.

<div class="mt-3">
  <p-dropdown  
    [filter]="true"
    [(ngModel)]="summaryLoadInfoData()!.customerInfo!.customerId"
    ...
  />
</div>