Question

对Angular来说真的很新，我遇到了一个奇怪的问题。

我有一个成分列表，每种成分中都有一个指标选择元素。

<div class="ingerdients__wrapper" *ngFor="let ingredient of ingredientsList">

<div class="ingerdients__amount-wrapper">

  <p>Amount</p>

  <input type="number" [(ngModel)]="ingredient.amount">

</div>

<div class="ingerdients__amount-wrapper">

  <p>Unit</p>

  <select [(ngModel)]="ingredient.metric.id"  id="Metric_{{ingredient.metric.id}}" name="Metric_{{ingredient.metric.id}}">
    <option *ngFor="let metric of metricsList" [ngValue]="metric.id">{{metric.name}}</option>
  </select>

</div>

<div class="ingerdients__desc-wrapper">

  <textarea cols="30"
            rows="3"
            placeholder="Description"
            [(ngModel)]="ingredient.name"
            (keydown.Tab)="addIngredientToList()"
  ></textarea>

</div>

<div class="ingerdients__add-ingredient-btn-mob-warpper">
  <div class="ingerdients__add-ingredient-btn-warpper mgr" (click)="addIngredientToList()">
    <i class="fa fa-plus" aria-hidden="true"></i>
  </div>
  <div class="ingerdients__add-ingredient-btn-warpper" (click)="deleteIngredientFromList(n)">
    <i class="fa fa-minus" aria-hidden="true"></i>
  </div>
</div>

一切正常，直到我使用功能添加新成分：

addIngredientToList() {
this.ingredientsList.push(this.createNewIngredient());}

发生的事情是，当我更改某个成分的指标值时，它将更改列表中其他成分的其他选择。

在列表上创建新成分后，通过提交页面可以使它正常工作。对导致此问题的原因有任何想法吗？任何建议，不胜感激。

Angular 5选择元素问题

0 个答案: