Angular | NgRx 检查 object 中的 null 字段，然后将其放入下拉列表

Question

I have a html dropdown which is sourcing data from an api, the api returns an array of objects [in the component]. The Dropdown uses a field value which is in most objects, but not all.

So it causes, some fields entries to show blank in the dropdown.

<div class="col-sm-5">
                    <label>DropDown<label class="field-importance" style="padding-left: 14rem">Required</label></label>
                    <select formControlName="Entry" placeholder="Select Entry" required>
                        <option value="null" disabled="true" [selected]="true" [hidden]="true">Select Entry</option>
                        <option *ngFor="let e of entry" [value]="e.val">{{e.val}}</option>
                    </select>
</div>

Thank you soo much

Answer 1

You could do a *ngIf check for val property before using it. Try the following

<div class="col-sm-5">
  <label>DropDown<label class="field-importance" style="padding-left: 14rem">Required</label></label>
  <select formControlName="Entry" placeholder="Select Entry" required>
    <option value="null" disabled="true" [selected]="true" [hidden]="true">Select Entry</option>
    <ng-container *ngFor="let e of entry">
      <ng-container *ngIf="e.val">
        <option [value]="e.val">{{e.val}}</option>
      </ng-container>
    </ng-container>
  </select>
</div>

Answer 2

I would recommend filtering out null values from your array in the ts code. So when you are initializing data to the entry variable, do something like this:

this.entry = data.filter(x => x.val);