Angular | NgRx 在将对象放入下拉列表之前检查对象中的空字段
Angular | NgRx Check for null field in an object before putting it in a list of dropdown
我有一个 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>
非常感谢
您可以在使用前对 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>
我建议在 ts 代码中从数组中过滤掉空值。所以当你初始化数据到入口变量时,做这样的事情:
this.entry = data.filter(x => x.val);
我有一个 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>
非常感谢
您可以在使用前对 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>
我建议在 ts 代码中从数组中过滤掉空值。所以当你初始化数据到入口变量时,做这样的事情:
this.entry = data.filter(x => x.val);