angular*ngIf检查是否选择了select标记中的最后一个选项

我正在我的web应用程序中实现一个调查,我想通过FormsModule利用Angular的表单。特别是,我有一个 <select> 标签,提示用户选择他们最喜欢的水果。如果他们最喜欢的水果没有出现在选择中,他们可以选择 'Other' 选项和添加表单将显示在下面,提示用户输入他们最喜欢的水果。当用户单击“添加”按钮时,他们的输入将记录在全局表单中,就像他/她选择了它一样,但它不会显示在“选择为”选项中。我发现了一种很好的方式,可以在select本身中显示用户的最爱,以显示他们的输入确实被记录下来了。

当选择的最后一个选项被选中时,是否有方法显示这个额外的表单, 没有 在手动编码的最后一个选项上使用模板引用。理想情况下,我希望使用*ngFor生成select中的所有选项,但目前我正在手动编写 最后的 “其他”选项,选择后将打开另一个div(通过*ngIf)。

这是我的fruit-survey.component.html文件:

<div class="container">
  <h1>Fruit Survey</h1>
  <form (ngSubmit)="onSubmit()" #surveyForm="ngForm">
      {{diagnostic}}
    <div class="form-group">
      <label for="fruit">What is your favorite fruit?</label>
      <select class="form-control" required [(ngModel)]="model.favoriteFruit" name="favFruit" #favFruit="ngModel">
        <option class="placeholder" selected disabled value="">Select One</option>
        <option class="otherFruitOption" hidden>{{otherFruitOption}}</option>
        <option *ngFor='let choice of fruitChoices'>{{choice}}</option>
        <option #otherFruit>Other</option>
      </select>
    </div>

    <div *ngIf="otherFruit.selected">
      <input type="text" class="form-control" #otherFruitInput>
      <button class="btn btn-success" (click)="(otherFruitInput.value) ? updateSelect(otherFruitInput.value, otherFruit) : ''">Add</button>
      <br />
    </div>

    <button type="submit" class="btn btn-success">Submit</button>
  </form>
</div>

这是我的fruit-survey.component.ts文件:

import { Component, OnInit } from '@angular/core';
import { Survey } from './Survey';

@Component({
  selector: 'app-fruit-survey',
  templateUrl: './fruit-survey.component.html',
  styleUrls: ['./fruit-survey.component.css']
})
export class FruitSurveyComponent implements OnInit {

  submitted = false;
  model = new Survey('');
  fruitChoices: string[] = ['Apple', 'Banana', 'Grape', 'Orange', 'Watermelon'];
  otherFruitOption: string;

  get diagnostic() { return JSON.stringify(this.model); }

  constructor() { }

  ngOnInit() {
  }

  onSubmit() {
    this.submitted = true;
  }

  updateSelect(fruit: string, otherFruit: any) {
    fruit = fruit.trim();
    this.model.favoriteFruit = fruit;
    this.otherFruitOption = fruit;
    otherFruit.selected = false;
  }

}

几个月前我刚开始学习Angular,我知道我实现所有这些的方式是“老套的”,可能并不完美,所以任何关于重新构建代码的建议都是一个额外的收获。