标签: angular2-ngmodel

我有这样一个数组:

 objectArray = [
        {"name": "Car"},
        {"name": "Bike"},
        {"name": "Boat"},
        {"name": "Plane"}
    ];

这样的模板:

<li *ngFor="#obj of objectArray">
   <a href="#" class="small" data-value="option1" tabIndex="-1">
      <input type="checkbox" (change)="expression && expression.value = $event.target.checked ? true : undefind" [ngModel]="expression?.value">
      <label for="">{{ obj.name }}</label>
   </a>
</li>

但是,如果选中1复选框,则设置为true.我该如何单独设置？

所以我一直在玩Angular 2一段时间了.[(ngModel)]在一个中使用该指令<input>非常简单.然而,我无法弄清楚如何通过或至少得到以前的值,所以我可以比较两者 - 新旧两者.

我从变换检测开始,(ngModelChange)因为(change)在输入字段blured之后启动(似乎是一个bug btw).所以我的代码目前看起来像这样($event可以看作占位符,因为我不知道要传递什么).

<input [(ngModel)]="myModel" (ngModelChange)="changeEvent($event)">

我也试过传递一个自定义的本地模板变量,这显然不起作用:

<input [(ngModel)]="myModel" #myModel="ngModel" (ngModelChange)="changeEvent($event)">

我知道,使用DoCheck至少有可能实现这一目标.但是因为我只需要一次(目前)我真的不想使用那种方法.最重要的是,我正在使用上面的构造*ngFor.

我有一个非常简单的页面，其中有两个填充了相同数据（银行账户）的选择。一个目标是源，另一个目标是为了创建交易。在这个简单的场景中，交易只是从一个账户转移到另一个账户的金额。

我在将交易发送到我的休息服务时遇到问题。从下图很容易看出交易变量没有正确填充，但我不知道出了什么问题。

我看到交易中的第一个帐户（源）部分填充，第二个（目标）带有 [object Object]。为什么没有填充相同，因为它们是完全相同类型的对象，为什么在第一个名称中没有填充？

新交易.html：

<div>
  <div>
  <label>Source Account</label>
  <select [(ngModel)]="transaction.sourceAccount"> 

      <option *ngFor="let a of accounts" [value]="a" >{{a.name}}</option>
  </select>
</div>
<div>
  <label>Target Account</label>
  <select  [(ngModel)]="transaction.targetAccount" > 
      <option *ngFor="let a of accounts" [value]="a">{{a.name}}</option>
  </select>
</div>
<div>
  <input type="text" [(ngModel)]="transaction.amount">
</div>
<div>
    <button (click)="addTransaction()">Add</button>
 </div>
</div>

new-transaction.component.ts

...
export class NewTransactionComponent implements OnInit {

  accounts: Account[];
  transaction: Transaction = new Transaction();

  constructor(private accountService: AccountService, private transactionService: TransactionService) { }

  ngOnInit(): void {
    this.transaction.targetAccount = new Account();
    this.transaction.sourceAccount = new Account();

    this.accountService …

在我的组件中，我试图取消选择具有相同类名的所有复选框。

querySelector每次（或一次）仅选择第一个...，querySelectorAll并且不选择任何内容。

这就是功能。我知道这样使用jQuery是错误的，但这说明了我的目标。

unsetAllOptions(){
    var self = this;
    var i = 0;
    $("input.option_input").each(function(){
        i++;
        var element = self.elRef.nativeElement.querySelector("input.option_input")[i];
        if(element.checked){
            // console.log(i)
            console.log('unchecking:',i);
            element.checked=false;
            element.dispatchEvent(new Event('change'));
            element = "";
        }
    });
}

这是简单的自定义表单控件

@Component({
  selector: 'app-custom-control',
  template: `
    {{ value }}
    <input [ngModel]="value" (ngModelChange)="onChange($event)">
  `,
  providers: [{
    provide: NG_VALUE_ACCESSOR,
    useExisting: forwardRef(() => CustomControlComponent),
    multi: true,
  }]
})
export class CustomControlComponent implements ControlValueAccessor {

  private value: any;

  private onChange: (val) => void;
  private onTouch: () => void;

  writeValue(value: any) {
    this.value = value;
  }

  registerOnChange(fn: any): void {
    this.onChange = fn;
  }

  registerOnTouched(fn: any): void {
    this.onTouch = fn;
  }
}

使用如下：

@Component({
  selector: 'my-app',
  template: `
    <app-custom-control
      [ngModel]="model"
      (ngModelChange)="onChange($event)">
    </app-custom-control>
    <input [ngModel]="model" …

这就是我想要做的.

• 将组单选按钮放在Ionic2弹出菜单中.
• 这些选项实际上是控制内容将加载的JSON文件.
• 用户选择一个选项,关闭弹出窗口,内容将在页面中相应更新.

我不确定如何将Ionic2 Popover中的值传递给它的父组件.如果我理解正确的话Ionic2的Popover是一个儿童组件.但是我不知道如何传递[(ngModel)]价值.

我知道这里看起来很混乱......好吧,如果只有某人能够做出一个简单的例子来说明如何将值从PopOver传递给Page ...

所以...这一切都在一个文件中:

import {Component, Injectable, Input, Output, EventEmitter} from '@angular/core';
import {ViewController, NavController, Popover, Content, Events, NavParams} from 'ionic-angular';
import {CardService} from '../../providers/card-service/card-service';
import {LangService} from '../../providers/lang-service/lang-service';
import {GlobalService} from '../../providers/global-service';   

Popover组件:

@Component({template: `
    <ion-list  radio-group [(ngModel)]="selected"  (ionChange)="loadc(selected)"> 

        <ion-item  *ngFor="let chapter of menuArray">
            <ion-label>{{chapter.ctitle}}</ion-label>
<ion-radio value="{{chapter.cchap}}" ></ion-radio>
        </ion-item>
    </ion-list>

        `,
    providers: [CardService, LangService, GlobalService],
directives: [LangService]
})

@Injectable()
export class ChapterService{
private chpselected : any;
private menuArray: any;
    constructor(
    private viewCtrl: …

我想将角度2中的选择的默认选项设置为"选择一个选项".这是我到目前为止的代码:

HTML

<div class="form-group">
                        <label class="col-md-4 control-label" for="CustomFix">Select an option:</label>
                        <div class="col-md-4">
                            <select id="example" name="example" class="form-control" [(ngModel)]="exampleArray" (ngModelChange)="changes()">
                                <option disabled selected>Select a Custom Fix</option>
                                <option *ngFor="let example of exampleArray" [ngValue]="example">{{example.attribute }}</option>
                            </select>
                        </div>
                    </div>

打字稿

changes(){
console.log(this.example.option);
}

我的html中有一行:

<option disabled selected>Select a Custom Fix</option>

如何启用此选项作为默认选项？它与我用于ngModel的数组分开

如何检索NgModelGroup嵌套在 中的的验证状态NgFor？

如果我没有NgFor，我可以将组分配给这样的模板变量：

<p *ngIf="addressCtrl.invalid">Address is invalid.</p>

<div ngModelGroup="address" #addressCtrl="ngModelGroup">
    <input name="city"  [ngModel]="address.city"  required>
    <input name="state" [ngModel]="address.state" required>
    <input name="zip"   [ngModel]="address.zip"   required>
</div>

但相反，我想要这样的东西：

<p *ngIf="addressCtrl.invalid">Address # {{index}} is invalid.</p>

<div *ngFor="let address of addresses">
    <div ngModelGroup="address" #addressCtrl="ngModelGroup">
        <input name="city"  [ngModel]="address.city"  required>
        <input name="state" [ngModel]="address.state" required>
        <input name="zip"   [ngModel]="address.zip"   required>
    </div>
</div

问题是我得到的addressCtrl是未定义的。

这是我创建的一个 plunker 来测试这个：https ://plnkr.co/edit/RXi2T52kynsWLr4fDMVa?p=preview

我是Angular的新手，我试图绑定由模型对象的文本框组成的表单。但我收到类似“未处理的承诺拒绝：模板解析错误：由于它不是'input'的已知属性而无法绑定到'NgModel'的错误”

我在Google投入了大量时间，但仍然存在问题

下面是我的代码。

的HTML：

    <div>
     <div class="col-sm-6 form-group">
        <label class="control-label">Project Name:</label>
        <input type="text" class="form-control" id="txtProjName" [(NgModel)]="projectFieldsdtl.PROJECT_NAME" >
    </div>

     <div class="col-sm-6 form-group">
        <label class="control-label">Project Manager Name:</label>
        <input type="text" class="form-control" id="txtProjManager" >
    </div>
    <div class="col-sm-6 form-group">
        <label class="control-label">Project Manager Email ID:</label>
        <input type="text" class="form-control" id="txtProjManagerMailID" >
    </div>
    </div>

app.module.ts

    import { NgModule }      from '@angular/core';
    import { BrowserModule } from '@angular/platform-browser';
    import { AppComponent }  from './app.component';
    import { FormsModule} from '@angular/forms';  
    import { HttpModule } from '@angular/http';
    import {SpotCheckStatusComponent} from './spotcheckstatus.component'; …

我有一个输入文本框，它使用 ngModel 绑定到组件类内的变量。单击按钮后，我想清除输入文本，但是更改变量值不会更改输入文本。

我已经重新分配变量并从 ChangeDetectorRef 调用 detectorChanges()，但它仍然不起作用。

这是我有的模板

<form #beaconForm="ngForm" autocomplete="off">
        <input #searchBox
               id="search-query"
               name="search-query"
               [ngModel]="inputValue"
               (ngModelChange)="searchAutocomplete($event)"
               (keydown)="onKeyDown($event, searchBox)"
               (blur)="onBlur()"
               (focus)="onFocused(searchBox.value)">
        <button color="accent" mat-mini-fab (click)="action(searchBox.value)"><mat-icon>add</mat-icon></button>
</form>

然后点击我想做的动作

private inputValue: string = "";

action(value) {
      this.inputValue = "";
      this.cd.detectChanges();
  }

我希望这会清除输入，但事实并非如此。知道我的错误在哪里吗？

我已经建立了这个表格：

这是html代码：

<table class="table table-hover table-bordered table-striped table-highlight">
  <thead>
    <tr>
      <th *ngFor="let cell of tableData2.headerRow">{{ cell }}</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let row of tableData2.dataRows">
      <td *ngFor="let cell of row">
        <input type="text" class="form-control border-input" [(ngModel)]="cell" name="cell" />
      </td>
    </tr>
  </tbody>
</table>

这是相关的打字稿代码：

declare interface TableData {
  headerRow: string[];
  dataRows: string[][];
}
public tableData2: TableData;
this.tableData2 = {
  headerRow: ['Version', 'Approbateur(nom+fonction)', 'Principales remarques', 'Date d\'approbation'],
  dataRows: [
    ['ahmed', '', '', ''],
    ['', '', '', ''],
    ['', '', '', ''],
    ['', '', …

我有这样的ng for循环

<template ngFor let-game [ngForOf]="(games)" let-index="index">
    <tr>
        <td>
            <select [(ngModel)]="selectedPrice" class="form-control" name="">
                <option *ngFor="let price of prices">{{price}}</option>
            </select>
        </td>
        <td>
    </tr>
</template>

显然，更改一个元素的价格会更改所有其他元素的价格。

这是我的意思的一个分支，当您更改一个下拉菜单时，它会更改另一个。 https://plnkr.co/edit/LVViSdlgmY56RnO8mAU4?p=preview

我的问题是：有没有一种方法可以利用模板元素中的索引为每个生成的元素仅绑定一个selectedPrice？因此，当我更改一个下拉值的值时，对于其他所有值都不会更改

我已经尝试过某些语法，例如[（ngModel）] =“ selectedPrice [index]”，但在选择价格时没有达到我想要的含义，selectedPrice [index]实际上并不包含值。我还有其他几种可行的方法，但是它们很笨拙。

我有一个项目，其中包含几个问题，我希望默认出现第一个问题。

我已经看到了如何使用索引来实现此目的的示例，其类型为：

<select>\n <option *ngFor="let answer of answers; let i = index" [value]="answer.id" [selected]="i == 2">\n  {{answer.name}}\n </option> \n</select>\n

它有效，但是当我想将选择绑定到组件的属性时，它不再被选择：

<select  [(ngModel)]=searchterms.answerId>\n <option *ngFor="let answer of answers; let i = index" [value]="answer.id" [selected]="i == 2">\n  {\xe2\x80\x8c{answer.name}}\n </option> \n</select>\n

您可以在此处查看示例：

https://stackblitz.com/edit/angular-rv9vqi

正如一些答案中所说，解决方案是为 serachterm 设置默认值，但我遇到的问题（我无法在操场上重现它）是我从要求返回的服务收到这些答案，当组件构建完成后，它仍然没有它们，它给了我一个错误....一旦它们存在于服务中，我怎样才能让它为这些搜索词分配值？