angular - 如何在由 Angular 2 *ngFor 填充的选择元素上设置选择？

我有一个<select>过滤我的数据表。数据表中填充有从服务检索的竞赛列表。选择过滤器填充了同样从服务中检索的体育运动列表。

我想要的是在选择元素中有一个初始默认选项，该选项将显示所有比赛，例如“请选择一项运动”，当用户选择一项运动时，比赛就会被过滤。

我尝试了以下操作，但选择元素最初始终为空。有办法实现这一点吗？

<select class="form-control" [(ngModel)]="filterQuery">
   <option selected="selected" disabled>Please select a Sport</option>
   <option id="sport" *ngFor="let sport of sports" [ngValue]=sport>{{sport.name}}</option>
</select>

我认为如果filterQuery 是字符串类型但filterQuery 是Sport 类型，Gunter 建议的方法会很好地工作。我的管道是

export class SportFilterPipe implements PipeTransform {

transform(array: any[], query: Sport): any {
    if (query) {
        var result = array.filter(function (obj) {
            return obj.sport === query.id;
        });
        return result;
    }
    return array;
}
}

还有什么我可以做的吗？

最佳答案

通过将值分配给filterQuery。

[(ngModel)]="filterQuery" 的 [] 部分设置初始值。

只需删除selected="selected"

关于angular - 如何在由 Angular 2 *ngFor 填充的选择元素上设置选择？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43123486/