标签: angular2-ngmodel

我有一个与客户打交道的Angular 2应用程序和一个弹簧休息后端.客户对象有一个客户类型,也是一个对象,我在客户表单上下拉工作,以便将对象存储为值,但我无法弄清楚如何选择正确的客户类型现有客户已加载到表单中.

<select  class="form-control" required [(ngModel)]="customer.customerType" >
   <option *ngFor="let ct of customerTypes" [ngValue]="ct">{{ct.customerType}}</option>
</select>

在上面的代码段中,如果客户已有客户类型,则下拉列表将不会选择任何值.我记得使用ngOptions解决了angular1的相同问题:

<select ng-model="customer.customerType"
        ng-options="customerType.customerType for customerType in customerTypes 
        track by customerType.customerType" >
</select>

所以,我的问题是,如何复制Angular1在Angular 2中解决这个问题的方式

我只是在阅读和学习Angular2教程.这里说"在将[(ngModel)]与表单结合使用时,定义名称属性是必需的." 然而,在本教程中,它使用ngmodel没有name属性在这里.

 <input [(ngModel)]="selectedHero.name" placeholder="name"/>

你能解释一下为什么这有效吗？请注意:我是角度和UI的新手

在我的TS文件中，我正在selectedValsObj像这样动态地在对象上创建属性：

private selectValsObj: any = {};

setSelectedValsObj(sectionsArr) {
  sectionsArr.forEach(section => {
    section.questions.forEach(questionObj => {
      if (questionObj.type === 'drop-down') {
        this.selectValsObj[questionObj.questionId] = { selected: questionObj.answerDetails[0] };
      }
    })
  });
}

在我的HTML中，我想将[ngModel]我的输入绑定到该selectValsObj对象的属性。我已经尝试过了，但是没有运气：

<div *ngFor="let question of section.questions">
    <div class="drop-down-question" *ngIf="question?.type === 'drop-down'">
        <select class="q-select"
                [(ngModel)]="selectValsObj[questionId].selected" // <== doesnt work either**
                // [(ngModel)]="selectValsObj[{{ questionId }}].selected" // <== doesnt work**
                name="answerForQuestion{{ question?.questionId }}">
            <option *ngFor="let answer of question?.answerDetails"
                [ngValue]="answer">
                    {{ answer?.value }}
            </option>
        </select>
    </div>
</div>

如何ngModel …

我想创建Angular 2指令,它将仅从用户输入到输入字段的文本的开头和结尾处确定空格.

我有输入字段

<input trim name="fruit" [(ngModel)]="fruit"/>

和指令

import {Directive, ElementRef} from "@angular/core";

@Directive({
  selector: 'input[trim]',
  host: {'(blur)': 'onChange($event)'}
})

export class TrimWhiteSpace {

  constructor(private cdRef:ChangeDetectorRef, private el: ElementRef){}

  onChange($event:any) {
    let theEvent = $event || window.event;
    theEvent.target.value = theEvent.target.value.trim();
  }
}

哪个工作正常,删除空格并更改输入字段中的文本,但问题是ngModel变量"fruit"中的值没有更改,它仍然包含在开头或结尾处带空格的文本.

我还尝试在onChange方法中添加以下内容

this.el.nativeElement.value = theEvent.trim();
this.cdRef.detectChanges();

并将表单(模糊)更改为(ngModelChange),但ngModel中的文本不受影响.

有什么建议？

我有一个表格,每行包含一个复选框.在表头中,我有一个Check All切换所有表行框的复选框.

我试图实现一些逻辑,如果复选框的数量将超过特定限制,显示错误,不要切换表行复选框或checkall框本身.

有一个问题是允许对checkAll盒子进行检查,即使我正在返回false.我的绑定问题？

HTML:

<input type="checkbox" name="checkAll" [(ngModel)]="checkedAll" (ngModelChange)="toggleAllEmployees($event)">

零件:

toggleAllEmployees(flag) {

    const temp = [];

    if (flag) {

        // If selecting all of these passes the max, throw an error
        if (this.importResults.length > this.maxSelection) {

            /* This is where I get to when I display the error message */
            alert('The number of employees you are trying to select (' + this.importResults.length + ') exceeds the max limit.');
            return false;

        } …

我试图实现非常简单的<select>行为：如果用户取消更改，则恢复到以前的值。事实上，我成功了，但这花了我几个小时，而且我仍然对实施不满意，因为它不是那么明显和棘手。

所以，这是模板：

<select id="states" class="form-control" name="states" [ngModel]="selectedState"
        (ngModelChange)="onStateChange(selectedState, $event)">
    <option [ngValue]="null">All</option>
    <option *ngFor="let state of states" [ngValue]="state">{{state.name}}</option>
</select>

和组件：

export class AppComponent {
  selectedState: State = null;

  states: State[] = [
    { name: 'Alabama', population: 100000 },
    { name: 'Alaska', population: 50000 }
  ];

  onStateChange(previousState: State, state: State): void {
    // If we're changing state from "All" to any, it's OK
    if (previousState === null) {
      this.selectedState = state;
      return;
    }
    // Otherwise we want the user to …

我正在尝试创建一个简单的select组件,它通过属性接收一些数据并呈现所需的选项.我打算在另一个组件的模板中使用这个select组件,比如PageComponent's template(page.template.html).

我正在select使用PageComponent的变量绑定到组件[(ngModel)].选择一个选项后,变量get的值会按预期更新,但如何在页面加载时将其设置为指向第一个选项而不触发select组件的手动选择？

这是代码.

在page.template.html中

<select ui-select 
        [options]="options" 
        [(ngModel)]="alertType"
        [defaultValue]="'Select an alert Type'">
</select>
{{alertType}} <!-- To see the value while debugging -->

在page.component.ts中,PageComponent类

alertType:any;
options = [
    {id:1, value:"item-1"},
    {id:2, value:"item-2"},
    {id:3, value:"item-3"}
];

在select.component.ts中

import {Component, Input} from '@angular/core'

@Component({
  selector: '[ui-select]',
  template: `
    <option *ngIf="defaultValue" value="-1">{{defaultValue}}</option>
    <option *ngFor="let option of options" [value]="option.id">{{option.value}}</option>
  `
})
export class SelectComponent {
  @Input() options: any;
  @Input() defaultValue: …

我是 angular 2 的新手，我尝试了 [(ngModel)] ，如下所示。

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

@Component({
  selector: 'my-app',
  template: `<input [(ngModel)]="model.name" name="name"> <h1>{{model.name}}</h1>`
})
export class AppComponent  { 
constructor() {
}
model = {name: "some value"};
}

上面的代码在浏览器中初始加载网页时产生如下所示的输出..

第二个是..

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

@Component({
  selector: 'my-app',
  template: `<input [(ngModel)]="model.name" name="name"> <h1>{{model.name}}</h1>`
})
export class AppComponent  { 
constructor() {
}
model = {};
model.name = "some value";
}

这个产生以下输出..

请解释两个代码示例之间的区别以及为什么它在第二个示例中不起作用。

提前致谢。

这是我目前的代码:

<select name="role" [(ngModel)]="user.role">
    <option *ngFor="let role of roles" [ngValue]="role" [attr.selected]="role == user.role ? 'true' : 'false'">{{role.name}}</option>
</select>

我正在加载数组中的所有角色,并且用户类具有Role属性(不会像user.role = roles[0]后端数据一样加载).

问题是所选属性不起作用,而我的选择不会转到正确的角色.我究竟做错了什么？

如何在多选中设置默认选定值。我从数据库中获取current_options和all_options我想更新current_options并再次发送新值做数据库。

更新数据库有效，但当我刷新页面时，没有选择任何选项。

current_options = [{id:1, name:'name1'}];                    #from database
all_options = [{id:1, name:'name1'},{id:2, name:'name2'}];   #from database

我的模板：

<select multiple name="type" [(ngModel)]="current_options">
    <option  *ngFor="let option of all_options" [ngValue] = "option">
        {{option.name}}
    </option>
</select>`