相关疑难解决方法(0)

启动Angular应用程序时出现以下错误,即使未显示该组件也是如此.

我必须注释掉,以便我的应用程序正常运行.

    zone.js:461 Unhandled Promise rejection: Template parse errors:
    Can't bind to 'ngModel' since it isn't a known property of 'input'. ("
        <div>
            <label>Created:</label>
            <input  type="text" [ERROR ->][(ngModel)]="test" placeholder="foo" />
        </div>
    </div>"): InterventionDetails@4:28 ; Zone: <root> ; Task: Promise.then ; Value: 

我正在看着英雄的掠夺者,但我没有看到任何区别.

这是组件文件:

    import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
    import { Intervention } from '../../model/intervention';

    @Component({
        selector: 'intervention-details',
        templateUrl: 'app/intervention/details/intervention.details.html',
        styleUrls: ['app/intervention/details/intervention.details.css']
    })

    export class InterventionDetails
    {
        @Input() intervention: Intervention;

        public test : string = "toto"; …

在Angular 2中,如何使用NgFor在重复列表中与NgModel进行双向绑定.下面是我的plunkr和代码,但我收到一个错误.

Plunkr

@Component({
  selector: 'my-app',
  template: `
  <div>
    <div *ngFor="let item of toDos;let index = index;">
      <input [(ngModel)]="item" placeholder="item">
    </div>
    Below Should be binded to above input box
    <div *ngFor="let item of toDos">
      <label>{{item}}</label>
    </div>
  </div>
  `,
  directives: [MdButton, MdInput]
})
export class AppComponent { 
  toDos: string[] =["Todo1","Todo2","Todo3"];
  constructor() {}
  ngOnInit() {
  }
}

===最后更新==

http://plnkr.co/edit/WKRBB7?p=preview

因为我在表单中使用ngModel,所以我必须添加nameattribue.

而我的错误是我使用了与其名称相同的值.

<form #myform="ngForm">
    <table>
      <tr *ngFor="let staff of staffs">
         <td><input name="name" [(ngModel)]="staff.name">{{staff.name}}</td>
      </tr>
    </table>
</form>

在我改为下面之后,我的问题得到了解决.

<form #my2form="ngForm">
   <table>
      <tr *ngFor="let staff of staffs;let i = index">
         <td><input name="staff.{{i}}.name" [(ngModel)]="staff.name">{{staff.name}}</td>
      </tr>
    </table>
</form>

==========

抱歉,我不记得为什么我使用名称[$ index] .Name而不是x.Name.

也许几年前我遇到了一些使用x.Name的错误,然后养成了使用索引的习惯.

- -更新 - - -

我需要一个内联编辑表,双向绑定.

<table>
   <tr *ngFor="let x of names">
     <td><input [(ngModel)]="x.Name">{{x.Name}}</td>
   </tr>
</table>

let names = [
{ Name:'jim'},
{ Name:'tom'}
];

最初页面显示:

blank text field; jim

blank text field; tom

在第一个文本字段中输入'aaaaaa'后,它变为:

aaaaaa; aaaaaa …

编辑:更新了Plunkr:http://plnkr.co/edit/fQ7P9KPjMxb5NAhccYIq？p = preview

这部分有效:

<div *ngFor="let entry of entries | async">
  Label: {{ entry.label }}<br>
  Value: {{ entry.value }}
</div>

但我对选择框有问题,错误信息是:

无法绑定到'ngModel',因为它不是'select'的已知属性

整个组件:

//our root app component
import {Component} from '@angular/core';
import {NgFor} from '@angular/common';
import {HTTP_PROVIDERS, Http} from '@angular/http';
import 'rxjs/Rx';
import {Observable} from 'rxjs/Rx';

@Component({
  selector: 'my-app',
  providers: [HTTP_PROVIDERS],
  template: `

  <select [(ngModel)]="selectValue" name="selectValue">
    <option *ngFor="let entry of entries | async" 
    [value]="entry.value">{{entry.label}}</option>
  </select>

    <div *ngFor="let entry of entries | async">
      Label: {{ entry.label }}<br>
      Value: {{ …

是否可以使用模板驱动形式的ngFor创建输入字段,并使用#name ="ngModel"之类的东西在另一个标签中使用name.valid？

现在,我们有一个动态的产品列表,其中包含数量字段和表格中的"添加到购物车"按钮.我想让整个事情成为最后添加全部按钮的表单,如下所示:

<form #form="ngForm">
    <div *ngFor="item in items">
        <input name="product-{{item.id}}"
               [(ngModel)]="item.qty"
               #????="ngModel"
               validateQuantity>
        <button (click)="addItemToCart(item)"
                [disabled]="!????.valid">Add to cart</button>
    </div>
    <button (click)="addAll()"
            [disabled]="!form.valid">Add all</button>
</form>

但是如何为ngModel每行生成一个新的变量名？

我正在从官方网站学习Angular 4 ,我通过ngModel来到双向数据绑定的部分.但是,一旦我将[(ngModel)]添加到我的组件模板,我的应用程序就会停止工作,即使在module.ts文件中导入了FormsModule.组件无法加载.
我正在使用Visual Studio Code.
这是我的app.component.ts

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

    export class Hero {
      id: number;
      name: string;
    }



    @Component({
      selector: 'app',
      template: `
      <h1>{{ title }}</h1>
      <h2>{{hero.name}} details!</h2>
      <div><label>Id:</label> {{hero.id}} </div>
      <div>name:<input [(ngModel)]="hero.name" type="text"></div>
      `,
      styles:[`
        .selected{
          transition: padding 0.3s;
          color: mediumseagreen;
        }
      `]
    })

    export class AppComponent {
      title = 'Tour Of Heroes';

     hero:Hero = {
       id:1,
       name:"Mr. Invisible"
     };
    }  

这是app.module.ts

import { FormsModule } from …

这似乎是一个流行的问题,但解决方案都建议导入FormsModule,而这正在完成.

错误是:

无法绑定到'ngModel',因为它不是'input'的已知属性.("

<label for="city">City</label>
<input type="text" id="city" [ERROR ->][(ngModel)]="chosenCity">
<input type="button" value="Get Weather" (click)="getWeather(chosenCity)" "):

模板和组件代码如下:

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

@Component({
    selector: 'weather',
    templateUrl: './weather.component.html'
})
export class WeatherComponent {
    public weather: Weather;

    constructor( private http: Http) {
    }

    public getWeather(chosenCity: string): void {
        this.http.get('/api/weather/city/' + chosenCity).subscribe(result => {
            this.weather = result.json();
        });
    }
}

interface Weather {
    temp: string;
    summary: string;
    city: string;
}

<h1>Weather check</h1>

<label for="city">City</label>
<input type="text" …

我刚开始使用 Angular 并尝试做一件简单的事情。当我在输入字段中输入名称时，Angular 应该更新 DOM。但是，当我使用这些括号 [] 时，像 [(ngModel)] 不仅不起作用，而且输入字段从 DOM 中消失了。没有这些 [] 括号它也不起作用。请帮忙

app.component.html 文件

 input type="text" [(ngModel)] = "name">
 <p>{{ name }}</p> 

app.component.ts 文件

import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: '.app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
name = '';
}

我刚刚在 上创建了一个空Angular项目IntelliJ，我正在尝试将一个文本框绑定到一个对象的成员。我的对象保留undefined或我在里面分配给它的任何东西OnInit。我包括FormsModule在app.module.ts，我无法让它工作。这是我的app.component.html文件：

<form #form="ngForm">
    <input type="text" name="name" id="name" [ngModel]="person.name">
    <button (click)="save()">save</button>
</form>

这是app.component.ts：

import {Component, OnInit} from '@angular/core';
import {IPerson, Person} from './model/person.model';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'my-app';
  names?: string;
  person?: IPerson;

  save() {
    console.log('::::::' + this.person.name);
  }

  ngOnInit(): void {
   this.person = new Person();
  }
}

app.module.ts：

import { BrowserModule …

我正在使用Angular 4.2.4，并且在控制台中遇到错误：

Uncaught Error: Template parse errors: Can't bind to 'ngModel' since it isn't a known property of 'input'.

当我在文件app.module.ts中包含FormsModule时

import { FormsModule,ReactiveFormsModule }   from '@angular/forms';
@NgModule({
  declarations: [
    AppComponent,
    ...APP_LAYOUTS,
    ...APP_COMPONENTS,
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})

和通过html代码是

<form id="user-add-form">
    <div class="text-center m-t-10"><span class="login-img"><i class="ti-check-box"></i></span></div>
    <h3 class="login-title">Add New User</h3>
    <div class="row">
      <div class="col-6">
        <div class="form-group">
          <input class="form-control" type="text" name="first_name" [(ngModel)]="first_name" placeholder="First Name">
        </div>
      </div>
      <div class="col-6">
        <div class="form-group">
          <input class="form-control" type="text" name="last_name" …

我有关于从 ngFor 中的 input type="text" 获取值的问题，而我将它与 [(ngModel)] 绑定，所有这些都具有相同的值，我如何绑定 ngFor 中的所有输入？

html

<button (click)="saveFeature()" type="button">save</button>

<input class="form-control" type="text" />
<button (click)="addFeature()" type="button">Add</button>

<div *ngFor="let inputservice of servicesfeature_id; let i=index">
  <input class="form-control" [(ngModel)]="listServiceFeature" type="text" />
  <button (click)="RemoveFeature(i)" type="button">Remove</button>
</div>

成分

servicesfeature_id: any = [];
servicesfeature_length: number = 0;
listServiceFeature: any = [];
servicefeature_name: string;

saveFeature(): void {
  console.log(this.listServiceFeature);
}

addFeature(): void {
  this.servicesfeature_id.push('service' + this.servicesfeature_length);
  this.servicesfeature_length += 1;
}

RemoveFeature(index): void {
  this.servicesfeature_length -= 1;
  this.servicesfeature_id.splice(index, 1);
}

这是代码plnkr.co