Question

我是angular2的新手。所以，请耐心等待。我知道这对某些人来说是个问题。

<form>
  <label class="input-group">
    <p>View By</p>
    <select [(ngModel)]="balance.viewBy" name="viewBy">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
  </label>
  <label class="input-group">
    <p>Date From</p>
    <input [(ngModel)]="balance.dateFrom" name="dateFrom"/>
  </label>
  <label class="input-group">
    <p>Date To</p>
    <input [(ngModel)]="balance.dateTo" name="dateTo"/>
  </label>
  <button type="button" (click)="search_data_balance()">Search</button>
</form>

component.ts

export class BalanceComponent {
    search_data_balance(){
        // get all input value.
    }
}

到目前为止我尝试了什么

let vb = balance.viewBy,
  df = balance.dateFrom,
  dt = balance.dateTo;

// returns error

在angular1中，我们可以获得使用$ scope的值。

任何帮助将不胜感激。感谢。

Answer 1

balance.viewBy将包含选择更改后的值。

需要设置value（对于字符串）或ngValue（对于其他类型）属性

  <option [ngValue]="1">1</option>
  <option [ngValue]="2">2</option>
  <option [ngValue]="3">3</option>
  <option [ngValue]="4">4</option>
  <option [ngValue]="5">5</option>

Answer 2

因此，您尝试将模型对象（常规对象）的不同属性绑定到各种控件。

模型对象应作为属性存在于组件中。您必须将模型初始化为组件的一部分。然后，要获取值，您应该查看该属性对象，如下所示：

export class BalanceComponent {

    private balance = {}; // <----  

    search_data_balance(){
        console.log(this.balance.dateTo);  // <----
    }

}

Answer 3

如果您可以更改标记。我取消了余额。我不知道如何在angular2中使用平衡。

ImportError: libboost_python.so.1.55.0: cannot open shared object file: No such file or directory

在您的组件中。您应该将每个模型定义为类。

<select [(ngModel)]="viewBy" name="viewBy">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>

<button type="button" (click)="search_data_balance(viewBy)">Search</button>

编辑2：

//在函数参数中传递balance对象。所以，你可以从类组件

中获取它

export class BalanceComponent {
    viewBy: any;   // define
    viewBy = 1;    // set value

    search_data_balance(view){
        console.log(view);    
    }
}

组件

<button type="button" (click)="search_data_balance(balance)">Search</button>

希望它适合你。干杯！

如何获取表单输入，使用Angular Binding选择值？

3 个答案: