如果我使用 ngModel、ngValue 以及如何在选择中添加占位符，如何设置选择的默认值

Posted 2023-02-18

【中文标题】如果我使用 ngModel、ngValue 以及如何在选择中添加占位符，如何设置选择的默认值

【英文标题】：How to set default value selected if i use ngModel, ngValue and how to add placeholder in select

【发布时间】：2021-12-31 21:49:05

【问题描述】：

如果我使用 ngModel、ngValue，如何设置默认值以及如何在选择中添加占位符

<select [(ngModel)]="defaultSelect" (change)="onChangeGoods(query_param)" #query_param="ngModel" name="query_param" >
    <option [ngValue]="'sortBy': 'price', 'sortOrder': 'asc'" > От дешевых к дорогим</option>
    <option [ngValue]="'sortBy':'price', 'sortOrder':'desc'" > От дорогих к дешевым</option>
    <option [ngValue]="'sortBy':'rating', 'sortOrder':'desc'" > По рейтингу</option>
</select>

<select [(ngModel)]="goods_for_brands[i]" (change)="onChangeBrand(brand)" #brand="ngModel" name="brand" id="brand" >
    <option [ngValue] = ""  selected >choose BRAND</option>
    <option [ngValue]="good.brand" *ngFor="let good of goods_for_brands">good.brand</option>
</select>

【问题讨论】：

你有两个<select>s。一个具有硬编码的<option> 值，另一个使用*ngFor。您希望将您的问题应用于哪些方面？

硬编码的在哪里，需要做selected和placeholder，其中*ngFor only placeholder。谢谢）

【参考方案1】：

如果你想要一个默认值，你只需要用一个初始化值初始化这个值。

<select [(ngModel)]="select" (ngModelChange)="onChangeGoods($event)" [compareWith]="compareFn">
    <option value="" disabled>Choose a state</option>
    <option [ngValue]=" sortBy: 'price', sortOrder: 'asc' ">A</option>
    <option [ngValue]=" sortBy: 'price', sortOrder: 'desc' ">B</option>
    <option [ngValue]=" sortBy: 'rating', sortOrder: 'desc' ">C</option>
</select>

ts

export class AppComponent 
    name = 'Angular ' + VERSION.major;
    select =  sortBy: 'price', sortOrder: 'asc' ;
    onChangeGoods(optionsValue: any) 
    compareFn(c1: any, c2: any): boolean 
        return c1 && c2  ? c1.sortBy === c2.sortBy && c1.sortOrder === c2.sortOrder  : c1 === c2;
    

你可以看到我用默认值初始化了名为select 的道具。注意compareFn 函数，你的值是一个对象，所以你应该写一个比较函数并将它绑定到你的选择。

[compareWith]="compareFn"

您可以在下面看到一个演示：https://stackblitz.com/edit/angular-ivy-8gsw9a?file=src/app/app.component.ts