Angular

Question

我有一个 html 下拉列表，它从 api、api returns 对象数组 [组件中] 获取数据。下拉列表使用的字段值在大多数对象中都有，但不是全部。

所以这会导致某些字段条目在下拉列表中显示为空白。

<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>

非常感谢

Answer 1

您可以在使用前对 val 属性进行 *ngIf 检查。尝试以下

<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

我建议在 ts 代码中从数组中过滤掉空值。所以当你初始化数据到入口变量时，做这样的事情：

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

Angular | NgRx 在将对象放入下拉列表之前检查对象中的空字段

Angular | NgRx Check for null field in an object before putting it in a list of dropdown

javascript

html

angular-forms

dynamic-forms