Question

我的Angular应用程序中有一个模板驱动表单，我做了很多尝试，但是我无法弄清楚我的代码有什么问题。

我想从选择列表中返回所选值并将其保存到Firebase数据库中。我有5个输入字段，所有字段都在返回数据，并且我能够保存到Firebase中，但选择列表值除外，其数据返回为未定义

这是我的模板驱动的表单代码：

<div class="formalign">
  <form #f="ngForm" (ngSubmit)="save(f.value)">
  <div class="form-group">
    <label for="title">Title</label>
     <input ngModel name="title" id="title" type="text" class="form-control">
  </div>
  <!--for Price-->
  <div class="form-group">
      <label for="price">Price</label>
      <div class="input-group-prepend">
        <span class="input-group-text">INR</span>
        <input ngModel name="price" id="price" type="number" class="form-control">
      </div>
  </div>
  <!--category-->
  <div class="form-group">
      <label for="catagory">Catagory</label>
       <select ngModel name="catagory" id="catagory" class="form-control">
         <option value=""></option>
         <option *ngFor="let c of valuearray"  [value]="c.$key">
           {{c.name}}
         </option>
       </select>
    </div>
    <!--Image-->
    <div class="form-group">
        <label for="image">Image</label>
         <input ngModel name="imageurl" id="image" type="text" class="form-control">
    </div>
    <!--Save Button-->
    <button class="btn btn-primary">Save</button>
  </form>
</div>

单击“保存”按钮类别选择列表后，返回未定义的值。我该如何解决？

以下是我的双向数据出价更新，其组件代码为：-

  <div class="form-group">
      <label for="catagory">Catagory</label>
       <select  [(ngModel)]="catagoryData" name="catagoryData" id="catagoryData" class="form-control">
         <option value=""></option>
         <option *ngFor="let c of valuearray"  [value]="c.$key">
           {{c.name}}
         </option>
       </select>
    </div>

在我的component.ts中，我试图打印该值，但它仍为我提供未定义的值：-

catagoryData:string;
    console.log("The Catagory",this.catagoryData);

Answer 1

这是Angular Template Driven Forms中的双向数据绑定示例。您需要将选择的ngModel双向绑定到控制器上的属性，在本例中为model.power。

<div class="form-group">
  <label for="power">Hero Power</label>
  <select class="form-control"  id="power"
          required
          [(ngModel)]="model.power" name="power">
    <option *ngFor="let pow of powers" [value]="pow">{{pow}}</option>
  </select>
</div>

选择AngularJs中的列表

1 个答案: