时间戳

首页 > 解决方案 > 如何在 Angular2 (7) 中使用 NgModel 在 Select/Option 中设置占位符？

html - 如何在 Angular2 (7) 中使用 NgModel 在 Select/Option 中设置占位符？

问题描述

我需要在我的选择选项中设置一个默认值/占位符，它看起来很容易做到，但我做不到。我尝试了不同的东西，但我得到了相同的结果。

<select class="form-control border custom-select" [compareWith]="compareFn"
        [(ngModel)]="skill.category">
    <option selected disabled="disabled">Chose a category...</option>
    <option *ngFor="let cat of categories" [ngValue]="cat"
            [hidden]="cat.id === 1">{{cat.name}}</option>
</select>

compareFn(c1: Skill, c2: Skill): boolean {
    return c1 && c2 ? c1.id === c2.id : c1 === c2;
}

我的输出是这样的：

标签： htmlangulartypescript

解决方案

为了达到预期的效果，使用切片管

  1. slice: 1 - 如果要删除的值始终是第一个选项

<select class="form-control border custom-select">
    <option selected disabled="disabled">Chose a category...</option>
    <option *ngFor="let cat of categories| slice:1" [ngValue]="cat">
      {{cat.name}}</option>
</select>

代码参考 - https://stackblitz.com/edit/angular-ay8zzk

有关 Slice Pipe 的更多详细信息，请参阅此链接 - https://angular.io/api/common/SlicePipe

推荐阅读