Question

是否可以使用模板驱动形式的ngFor创建输入字段，并使用#name =＆＃34; ngModel＆＃34;能够在另一个标签中使用name.valid吗？

现在我们有一个动态的产品列表，其中包含数量字段和表格中的“添加到购物车”按钮。我想把整个事情做成一个带有最后添加按钮的表单，如下所示：

getData(): Observable<any> {
  url = '/getData';
  this._data = this._http.get(url)
    .map(response => this.extractData(response));
  return this._data;
}

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

Answer 1

没有必要这样做，就这样做：

print('e')

它的Angular在这里。：）

Answer 2

mxii 答案按照@Component({ selector: 'hello', template: `<h1>{{displayName}}</h1>`, styles: [`h1 { font-family: Lato; }`] }) export class HelloComponent implements OnChanges { @Input() name: String; displayName:string; ngOnChanges(changes: SimpleChanges) { console.log('Life cycle hook method called.'); this.displayName='Hello, '+this.name; } }动态创建的表单项的预期效果，但如果您不打算使用ngFor，那么您就可以了重新迭代具有独立实体的项目列表（如评论列表，用户应该能够回复每个评论），您可以使用template reference variables，这使您能够获取和使用输入元素很容易。

以下是如何做到这一点：

ngForm

它提供了对分配给输入字段的变量的引用，在上面的示例中，我们传递了// Your template <div *ngFor="item in items">  <input #itemInput type="number"> <button (click)="addItemToCart(itemInput.value)" [disabled]="!itemInput.value">Add to cart</button> </div>，它将是输入字段的值;在某些情况下，您可能需要引用输入字段（假设您在获取数据时要删除其值），您只需传递itemInput.value即可一种itemInput并访问其数据。

Answer 3

你需要将FormModule添加到app.module.ts以获得双向绑定工作，至少在较新版本的angular

中

Angular 4 - "Can't bind to 'ngModel' since it isn't a known property of 'input' " error

带有ngFor输入的Angular 2模板驱动形式

3 个答案: