如果使用 ngFor，如何摆脱多余的空白 select 选项

Question

我正在构建一个 select 标记并使用 *ngFor 从 select_options 数组填充其中的选项。但是它总是在底部创建一个单独的空白选项项。请帮助摆脱它。

例如我有一个 select 选项数组： select_options = ['banana', 'apple', 'orange'];

    <select>
        <option *ngFor="let fruit of select_options"
            value="fruit">
            {{fruit}}
        <option>
    </select>

Answer 1

这是因为，没有关闭 <option>。试试这个：

<select>
    <option *ngFor="let fruit of select_options"
        value="fruit">
        {{fruit}}
    </option>
</select>

它会起作用，要选择默认值，试试这个：

<select [(ngModel)]="selectedFruit" name="test">

和

this.selectedFruit = this.select_options[0];

如@Baconbeastnz 所述。

How to get rid off the extra blank select option if using ngFor