相关疑难解决方法(0)

我试图在检测到变化ngModel的<select>标签.在Angular 1.x中,我们可以通过$watchon ngModel或者使用来解决这个问题ngChange,但是我还没有理解如何检测ngModelAngular 2中的更改.

完整示例:http://plnkr.co/edit/9c9oKH1tjDDb67zdKmr9？p = info

import {Component, View, Input, } from 'angular2/core';
import {FORM_DIRECTIVES} from 'angular2/common';

@Component({
    selector: 'my-dropdown'
})
@View({
    directives: [FORM_DIRECTIVES],
    template: `
        <select [ngModel]="selection" (ngModelChange)="onChange($event, selection)" >
            <option *ngFor="#option of options">{{option}}</option>
        </select>
        {{selection}}
    `
})
export class MyDropdown {
    @Input() options;

    selection = 'Dog';

    ngOnInit() {
        console.log('These were the options passed in: ' + this.options);
  }

  onChange(event) {
    if (this.selection …

我有一个角度4的表单,包含名字+姓氏和包含2个下拉列表(选择)的formarray作为级联下拉列表和删除按钮.表单的其余部分还包含一个发送按钮和一个添加选项按钮.我在这里添加了截图,让您更好地理解.表单添加,删除按钮和发送按钮工作有1个问题级联下拉列表只有当有1个级联下拉列表时,当我添加一个额外的级联时,选择前一组级联的值选择第二个选择搞砸了.我在这里添加了图片以获得更好的解释

正如你可以在第2和第3个画面cascadingdropdown工作当我改变标准选择看我FET正确选项在第二下拉菜单选择

在第4张图片第5张图片和第6张图片上,您可以看到添加选项按钮有效,但是当我在选项2第一个下拉列表中选择一个条件时,它与选项1第二次掉落混乱,现在它还包含第二个选项中的下拉选项

这是我的HTML代码

<form [formGroup] = "profileForm">

  <h1>Profile Form</h1>

 <div>
  <label for = "first-name-input">First Name</label>
  <input type="text" id="first-name-input" formControlName ="firstNameInput">
</div>
 <div>
    <label for = "last-name-input">Last Name</label>
    <input type="text" id="last-name-input" formControlName ="lastNameInput">
  </div>

  <div formArrayName="optionGroups">

    <div *ngFor="let optionGroup of profileForm.controls['optionGroups'].controls;  let i=index "[formGroup]="optionGroup">


      <h4>Option {{ i + 1 }} </h4>




     <div>
      <label for = "select-input">Criteria</label>
      <select id="select-input" (change)="onSelectSelect($event.target.value, i)"  formControlName ="selectInput">

          <option value="0" disabled selected>Select a Criteria</option>
          <option *ngFor="let select of selects"  [value]= "select.name">{{select.id}}</option>


        </select>

        <label for = "where-input">Option</label> …

我想导航使用动态生成的选择下拉列表.看起来我不能直接这样做,所以我只想在select更改时进行函数调用.

要做到这一点,我有这个:

---在模板中---

<select (change)="navSelected($event)">
    <option *ngFor="let button of navButtons;"
    value="button.route" >{{button.label}}</option>
</select>

足以说'navButtons'是一个具有'label'字段的对象数组.

- -在课堂里 - -

navSelected(navName) {
    console.log(navName + " Clicked!");
}

这实际上很好.

我从Mark Rajcok的大力帮助中得到了这一点以及他在这个老问题中的回答: 如何在Angular 2中的"select"中获得新的选择？

也就是说,我希望能够在navSelected()函数调用中传递选定的值.我不确定该怎么做.

我尝试将[ngValue]="button"其他搜索中的猜测添加到选项标记然后button在(change)事件处理程序中引用该变量(所以:(change)="navSelected(button.label)"和其他组合,无济于事.我看过很多对ngModel的引用,但它们看起来很旧,我不完全确定他们已经申请了(我无法让他们在RC4中工作).

我可能会拉一些jquery或其他任何东西来找到选择并获得它的值,但这似乎非常无聊 - 与仅仅能够正确调用函数相比.

const [data, Setdata] = useState<number[] >([]);
const [inputData, SetinputData] = useState<number>(0);
const [canAdd, SetcanAdd] = useState<boolean>(true);

  const numberField = (event: React.ChangeEvent<HTMLInputElement>) => {
    SetcanAdd(false)
    SetinputData(event.target.value);


    if(data.includes(event.target.value)){
      SetcanAdd(true)
    }

    // event.target.value Argument of type string is not assignable to parameter of type number
  };

  //jsx
    <input
        onChange={numberField }
        placeholder="add numbers"
        type="number"
        value={inputData}
     />

我怎样才能设置event.target.value数字？

我知道我可以将所有内容设置为字符串，但我希望它是一个数字

当使用Angular 2更改值时,如何调用方法？

 <select [(ngModel)]="searchMonster">
     <option>36</option>
     <option>37</option>
 </select>

我尝试使用ng-change但没有成功.

在我的 Angular 8 组件中，我向下拉控件添加了双向绑定。

风景

<select  (ngModelChange)='termSelectChanged($event)' [ngModel]="selected">
  <option [ngValue]="t" *ngFor='let t of termsColl'>{{t?.code}}</option>
</select>

组件代码

export class AppComponent implements OnInit{


     public termsColl : Array<DDModel>;
     public selected : DDModel;
     
      constructor( private s : DDService ){}
      
    termSelectChanged( event  ){    
            alert('HIT');
    }
    
    
      ngOnInit(){
        
        //service call #1
        this.s.getDataForComplexBind().subscribe(  data => {
          this.termsColl = data;
         
        }, error => error );    


        //service call #2
        this.s.getOtherData(  ).subscribe( data => {
          
          //model changes here
          this.selected = this.termsColl[1];
          
        }, error => {  console.error(error);  });

                    
    }

} 

当组件加载时，它执行 ngOnInit() …

这是我的HTML,当我点击选项"new-item"它将打开输入类型框,然后我输入要添加到选择选项的值

<form (submit)="addItem()">
    <input type="text" [(ngModel)]="add.name" name="name">
    <input type="text" [(ngModel)]="add.price" name="price">
    <input type="text" [(ngModel)]="add.description" name="description">
    <select [(ngModel)]="add.type" name="room-type">
        <option [value]="c">Select</option>
        <option>BreakFast</option>
        <option>Lunch</option>
        <option>Dinner</option>
        <option><button (click)="addSelect()">Add-item</button></option>
        <input *ngIf='edited' type="text" >
   </select>

我的类型脚本是,

addSelect() {
        this.edited = true;
}
constructor() {
    this.edited = false;
}

每当选择项目时,我都必须传递选项的值.但是在我的事件发生之后,传递的值总是未定义的.我的代码如下:

<select (change)="handle(this.value);">
<option value="0">Addition</option>
<option value="1">Subtraction</option>
<option value="2">Multiplication</option>
<option value="3">Division</option>
</select>

我的angular2代码如下:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
  n1 = 0;
 n2 = 0;
 result = 0;

handle(value){
  alert("selected option's value is "+value);
}

constructor() { }
  ngOnInit() {

 }

} 

问题是每当选项发生任何变化时,传递给handle函数的参数(值)总是"未定义".

alert("selected option's value is "+value);

在此行中,参数"value"的值始终未定义.

请帮忙!

提前致谢!

我的组件中有以下功能:

onProductSelect(e){
        var attrs = document.getElementById('firstAttr');        
        return this.groupComponentSvs.getProduct(e.target.value)
                      .subscribe(
                            selectProduct=>{                                
                                this.selectProduct=selectProduct; 
                                var select = "<select class='form-control' id='"+ selectProduct.attribute +"' (change)='selectNextAttr($event)' name='selectProd'>";
                                console.log(select);
                                    select+= '<option value="0">Select</option>';
                                for (var i=0; i<selectProduct.values.length; i++)  {
                                    select+= '<option value='+ selectProduct.values[i]+ '>'+ selectProduct.values[i] +'</option>';
                                }  
                                select+='</select>' ;                                
                                attrs.innerHTML = '<div id=attr_'+ selectProduct.attribute +'>'+ select +'</div>';                              
                                error=>this.errorMessage = <any>error
                            }                            
                )                 

    }

selectNextAttr(attr, val){
 console.log("this is a test");
}

我可以在我的html页面中插入选择菜单,但是我选择一个项目时没有触发更改事件.有人能告诉我为什么会这样吗？

谢谢