Question

我正在开展我的第一个Angular项目，并且我遇到了双向数据绑定的问题。

app.component.html

<div>
  <table class="table table-hover">
    <thead>
      <tr>
        <th>S.no</th>
        <th>Product Name</th>
        <th>Cost</th>
        <th>Amount</th>
        <th>Tax</th>
        <th>Total</th>
      </tr>
    </thead>
    <tbody>
        <tr *ngFor="let item of shoppingList, let i=index">
          <th> </th>
          <th>{{shoppingList[i]}}</th>
          <th></th>
          <th></th>
          <th></th>
          <th></th>
        </tr>
        <tr>
          <th><button type="button" (click) ="onAddButtonClick()" class="btn btn-primary">Add</button></th>
          <th><select class="form-control">
              <option (input)="selectedItemName=$event.target.value" ngDefaultControl *ngFor="let selectedItem of getProducts()" >{{selectedItem.name}}</option>
            </select></th>
          <th></th>
          <th><input type="text" class="form-control" id="usr"></th>
          <th></th>
          <th></th>
        </tr>
    </tbody>
  </table>

</div>

app.component.ts

import { Component,Input } from '@angular/core';
import {StaticDataSourceService} from './static-data-source.service';
import {ProductRepository} from './product.repo';
import {Product} from "./product";
import {ShoppingList} from "./shoppingList";


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  public shoppingList:String[]=[];

  public selectedItem:Product =new Product();

  public selectedItemName:String;

  title = 'app';
    constructor(private repository:ProductRepository){
    }

    getProducts():Product[]{
      return this.repository.getProducts();
    }

    onAddButtonClick(){
      console.log(this.selectedItemName);
    }

    addToCart(name:String){
      this.shoppingList.push(name);
    }
}

我想要实现的目标：我想将下拉列表的值传递给onAddButtonClick（）方法并将值添加到数组中（目前我只是尝试打印它）。但是，我不断获得控制台输出＆＃39; undefined＆＃39;。我也遇到了一些错误，在经过很多帖子之后，我添加了ngDefaultControl，这使得错误消失了。 ngDefaultControl有什么作用？提前感谢两个问题。

Answer 1

问题的关键是你的option元素在更改事件期间触发selectedItemName的设置。您正在使用input事件，但我认为您希望使用change并希望将其附加到select元素，而不是单个选项元素。

<select 
  class="form-control"
  (change)="selectedItemName=$event.target.value"
>
 <option *ngFor="let selectedItem of getProducts()" >{{selectedItem.name}}
  </option>
</select>

您可能需要在$watch元素上设置select以响应事件，而不是数据绑定

Answer 2

以下是我在您的代码中看到的问题。

1

        <tr *ngFor="let item of shoppingList, let i=index">
          <th> </th>
          <th>{{shoppingList[i]}}</th>
          <th></th>
          <th></th>
          <th></th>
          <th></th>
        </tr>

为什么不使用item而不是使用索引访问您的数组。像

这样的东西

          <tr *ngFor="let item of shoppingList, let i=index">
              <th> </th>
              <th>{{item.something}}</th>
              <th></th>
              <th></th>
              <th></th>
              <th></th>
            </tr>

您收到未定义错误的原因是因为您的shoppingList没有任何商品！您忘记在constructor或ngOnInit()。

我可以继续导入ShoppingList，它看起来像你的shoppingList的模型，但你只是使用shoppingList：String []。尝试上面的解决方案，如果您仍需要帮助，请告诉我。

麻烦在Angular中使用双向数据绑定

2 个答案: