空数组映射创建空值(角度)

时间:2019-11-27 10:35:57

标签: javascript angular typescript

我有一个角度分量,在这里我使用输入和列表来显示数组。

这是组件的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);

但是,如果数组为空,它将映射空值。我该如何解决?

2 个答案:

答案 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{...}