Question

我正在对我的Web应用程序进行调查，我想通过FormsModule利用Angular的Forms。特别是，我有一个<select>标签，提示用户选择自己喜欢的水果。如果未在选择中显示他们最喜欢的水果，则可以选择'Other'选项，并且下面会出现一个附加表单，提示用户输入他们喜欢的水果。当用户单击“添加”按钮时，他们的输入将被记录为全局形式，就好像他/她选择了它一样，但不会作为选择出现在选择中。我发现在选择本身中显示用户的收藏夹的巧妙方法，以表明确实记录了他们的输入。

当选择了select中的最后一个选项时，是否有一种方法可以显示该额外形式，不，使用手动编码的last选项上的模板引用。理想情况下，我想使用* ngFor生成select中的所有选项，但是目前我正在手动编码 last 'Other'选项，当选中该选项时，它将打开另一个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，我知道我实现所有这些方法的方式是“ hacky”的，而且可能并不完美，因此，有关重组代码的任何建议都将是一个奖励。

Answer 1

您可以将模板引用变量与select元素相关联，并测试selectedIndex是否对应于最后一个选项索引：

<select #fruitList ...>
  ...
  <option *ngFor='let choice of fruitChoices'>{{choice}}</option>
</select>

<div *ngIf="fruitList.selectedIndex === fruitList.options.length - 1">
  ...
</div>

有关演示，请参见this stackblitz。

Answer 2

您可以通过

访问*ngFor中列表的最后一项

*ngFor="let item of list; let isLast = last;"

您现在可以检查

*ngIf="isLast"

注意

在Angular 5或Angular 6中，语法为

*ngFor="let item of list; last as isLast;

角度* ng如果检查是否已选择选择标签中的最后一个选项

2 个答案: