select in angular 12 使用 ngModel 的默认选项值

Question

我有一个 select，它有一个硬编码选项，其中 ngValue 为空，其他选项用 ngFor 填充。我希望第一个 null 选项默认为 selected。无论我做什么，默认情况下我总是有一个空选项 selected。

我从父组件获取模型名称和数据，而父组件的数据来自 api。

select 组件。html:

<select name="typeSelect" [(ngModel)]="model" (ngModelChange)="onSelectChange($event)" class="form-select"
aria-label="Type select">
    <option [ngValue]="null">Select a type</option>
    <option *ngFor="let type of object.types" [ngValue]="type">{{ type.name }}</option>
</select>

它的.ts:

  @Input() object: ObjectData;
  @Output() outputChosenType: EventEmitter<any> = new EventEmitter<any>();
  @Input() model: string = '';

    onSelectChange(chosenType: any) {
        if(chosenType !== null ){...}
    }

我的 ts 中没有其他检查和逻辑，因为它们工作正常，唯一不工作的是选择了第一个选项。

模型来自另一个带有此组件的 ngFor。

parent.html:

<app-typeSelect-card *ngFor="let object of allObjects.data ; let i = index" [object]="singleObject"
            [model]="i.toString()" (outputChosenType)="onOutput($event)"></app-typeSelect-card>

Answer 1

如果您将模型的默认值更改为空，它将起作用。

 @Input() model: string = null;

select in angular 12 使用 ngModel 的默认选项值

Default option value for a select in angular 12 using ngModel

angular

forms

html-select

default

ngmodel