angular - 如何从 *ngFor 循环中的输入中获取值

Question

问题是我们必须采用 *ngFor 循环下的值，因此它采用来自第一个输入的值。我们必须对来自输入值的数组中的值进行排序。

HTML

<div *ngFor="let ele of container">
  <div *ngIf="keyValue === ''">
    <input type="text" [(ngModel)]="keyValue" />
    <textarea
      name=""
      id=""
      cols="30"
      rows="10"
      [(ngModel)]="textValue"
    ></textarea>
  </div>
  <button (click)="addContainer()">Add More</button>
</div>

.ts 文件

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

@Component({
  selector: 'app-sample',
  templateUrl: './sample.component.html',
  styleUrls: ['./sample.component.css'],
})
export class SampleComponent implements OnInit {
  constructor() {}
  container: any[] = [0];
  keyValue: String = '';
  textValue: String = '';
  newArray: any = [];
  ngOnInit(): void {}

  addContainer() {
    this.newArray.push({ key: this.keyValue, values: this.textValue });
    console.log(this.newArray);

    this.container.push(this.container.length);
    console.log(this.container);
  }
}

Answer 1

您应该使用响应式(Reactive)表单来构建表单，如果您想要像这样创建一个非常简单的表单。

HTML:

<div *ngFor="let ele of container; let i = index">

  <div >
    <input type="text" [(ngModel)]="newArray[i].values" />
    <textarea
      name=""
      id=""
      cols="30"
      rows="10"
      [(ngModel)]="newArray[i].textValue"
    ></textarea>
  </div>
</div>
<button (click)="addContainer()">Add More</button>

TS:

container: any[] = [1];
  newArray: any = [{ key: 1, values: '' }];
  ngOnInit(): void {}

  addContainer() {
    let keyValue = this.container.length + 1;
    this.newArray.push({ key: keyValue, values: '' });
    console.log(this.newArray);

    this.container.push(keyValue);
    console.log(this.container);
  }