HTML table with rows of input boxes, when no default value row is collapsed-CodePudding

I have the following table with dynamically generated rows of input boxes which may contain default value. When no default is available from the database an empty string is returned ''. The problem is this causes the table to be collapsed on those inputs.

 <tr *ngFor="let d of displayData">
    <td > {{d.specRow}} </td>
    <td *ngFor="let l of d.limitModel ">
      <input type="text" [ngModel]="l?.target" (ngModelChange)="changeSelectedItem($event, l)" [name]="l.target" />
    </td>

If I click in the input box next to Comment 4 then more rows are added until the next input with an empty string is reached. The input is tied to a model - how can I force these rows to render with an empty string?

EDIT: When not bound with ngModel the rows load as expected. The issue is binding to an empty string.

CodePudding user response：

The simplest solution for your particular case would be to add a hide class to those rows that have empty data.

 <tr *ngFor="let d of displayData" [class.hidden]="d.specRow == ''">

Ensure you have a corresponding 'hidden' class in your CSS.

CodePudding user response：

So here is what I did as a workaround. The rows would only render properly if each cell had value.

So I load the display with a ' ' in place of null for each empty input box. Afterwards I loop through all the inputs and trim after rendering is complete.

     this.displayData?.forEach((x) => {
      x.limitModel.forEach((y) => {
        y.target = y.target.trimStart();
      });
    });