我有一个角度分量,在这里我使用输入和列表来显示数组。
这是组件的html
<div class="form-group col-md-6">
<label>{{ l('Tools') }}</label>
<div class="row mt-2">
<div class="col-8">
<input
#toolsInput="ngModel"
[(ngModel)]="tool"
class="form-control"
type="text"
name="tools"
maxlength="32"
/>
</div>
<div class="col-4">
<button
[disabled]="tool == null || tool == '' || tool.trim() == ''"
type="button"
class="btn btn-primary"
(click)="addItemToTools()"
>
<i class="fa fa-plus"></i>
</button>
</div>
</div>
<div class="row mt-2">
<div class="col-12">
<p-listbox
[readonly]="true"
[options]="tools"
[style]="{
width: '85%',
height: '200px',
overflow: 'auto',
'overflow-y': 'scroll'
}"
>
<ng-template let-tool let-i="index" pTemplate="item">
<div class="row" style="margin-right: 0px; margin-left: 0px;">
<div class="col-9">{{ tool.value }}</div>
<div class="col-1">
<button
type="button"
class="btn btn-primary"
(click)="removeTool(i)"
>
<i class="fa fa-times"></i>
</button>
</div>
</div>
</ng-template>
</p-listbox>
</div>
</div>
</div>
这是我组件的TS代码(添加工具部分)
export class CreateJobComponent extends CreateEditModalComponentBase implements OnInit {
tools: SelectItem[] = [];
addItemToTools(): void {
this.tools.push({ value: this.tool, label: this.tool });
this.tool = null;
}
在保存方法中,我将其映射到这样的DTO数组-
this.job.tools = this.tools.map(e => e.value);
但是,如果数组为空,它将映射空值。我该如何解决?
答案 0 :(得分:1)
尝试这样:
if(this.tools.length > 0)
this.job.tools = this.tools.map(e => e.value)
答案 1 :(得分:0)
只需尝试:
if(array.length>0){ array.map....
}else{...}