Проблема привязки значения для входного текста, сгенерированного * NgFor - PullRequest
Новая
       24

Проблема привязки значения для входного текста, сгенерированного * NgFor

0 голосов
/ 05 июля 2019

При попытке * ngFor для массива в угловом формате сгенерировать входной текстовый элемент и привязать его к значению в массиве, я сталкиваюсь с некоторыми проблемами. Значение не связывается должным образом, когда пользователь вводит что-то для ввода текста.

Я попытался запустить changeDetection после обновления массива, но это не помогло.

В этом примере кода ниже я генерирую элемент ввода, нажимая на кнопку добавления, используя массив данных со строковым значением «test». [ngModel] ввода связывается со значением внутри массива. поэтому я ожидаю, что все входные данные будут иметь значение «test».

Но когда мы пытаемся ввести какое-либо значение во вход и затем нажать кнопку добавления, сгенерированный ввод не привязывается к значению в массиве.

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

import { Component } from '@angular/core';
@Component({
  selector: 'my-app',
  template: `
    <button (click)="onAdd()">Add</button>
    <br/><br/>
    <input
      *ngFor="let d of data;let i = index;trackBy:trackByfn" 
      type="text"
      [ngModel]="data[i]"
    > 
    <br/><br/>
    data: {{data|json}}
  `,
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  data = ['test'];  
  onAdd() {  
    this.data.push('test');
  }
  trackByfn = (index) => index;
}

Ответы [ 3 ]

0 голосов
/ 05 июля 2019

Рабочий пример stackblitz .

Это синтаксис двустороннего связывания ---> [(ngModel)] сохранить переменную, чтобы получить новое значение

  import { Component } from '@angular/core';
    @Component({
      selector: 'my-app',
      template: `

    <br/><br/>
    <input *ngFor="let d of data;let i = index;trackBy:trackByfn" 
    type="text" [value]="data[i]" [(ngModel)]="dataarray"> 
     <button (click)="onAdd(data[i])">Add</button>
    <br/><br/>
    data: {{data|json}}
      `,
      styleUrls: [ './app.component.css' ]
    })
    export class AppComponent  {

       data = ["ssdsdsd"];
       datatosave:any;  
      onAdd(data1) {  
        this.data.push(this.datatosave);

      }
      trackByfn = (index) => index;
    }
0 голосов
/ 05 июля 2019

Используйте директиву @ViewChildren.В onAdd() последний элемент inputs помещается в data[].Вот stackblitz для того же самого.

Код: 

import { Component, ViewChildren, ElementRef, 
         QueryList, AfterViewInit } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
  <button (click)="onAdd()">Add</button>
  <br/><br/>
  <input #inputRef type="text" 
  *ngFor="let d of data; let i = index; trackBy:trackByfn"> 
  <br/><br/>
  data: {{data | json}}
  `,
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  data = ['test'];

  @ViewChildren("inputRef") inputs: QueryList<ElementRef>;

  onAdd() {
    let domElement = this.inputs.last as ElementRef;
    this.data.push(domElement.nativeElement.value);
  }

}

Подробнее о @ViewChildren можно найти в официальных документах .

0 голосов
/ 05 июля 2019

Вы должны изменить [ngModel] на [(ngModel)], чтобы создать двустороннюю привязку данных.

Подробнее об угловой привязке данных: https://blog.thoughtram.io/angular/2016/10/13/two-way-data-binding-in-angular-2.html

import { Component } from '@angular/core';
@Component({
  selector: 'my-app',
  template: `
    <button (click)="onAdd()">Add</button>
    <br/><br/>
    <input 
      *ngFor="let d of data;let i = index;trackBy:trackByfn" 
      type="text"
      [(ngModel)]="data[i]"
    /> 
    <br/><br/>
    data: {{data|json}}
  `,
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  data = ['test'];  
  onAdd() {  
    this.data.push('test');
  }
  trackByfn = (index) => index;
}

Обновление : Использование группы форм 

import { Component } from '@angular/core';
import { FormGroup, FormControl, Validators, AbstractControl } from '@angular/forms';

@Component({
  selector: 'my-app',
  template: `
    <button (click)="onAdd()">Add</button>
    <div [formGroup]="form" *ngFor="let f of fields">
      <input type="text" [formControlName]="f" /> 
    </div>
    <div *ngFor="let f of fields">
      {{form.controls[f].value}}
    </div>
  `,
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  form: FormGroup = new FormGroup({
    test: new FormControl('test')
  });
  fields = ['test'];
  onAdd() {
    const length = this.fields.length;
    this.fields.push('test'+length);
    this.form.addControl('test'+length, new FormControl('test'));
  } // length to dynamically name the field
}

Примечание : не забудьте добавить ReactiveFormsModule в зависимости от импорта в app.module.ts

Я раздвоил ваш стек https://stackblitz.com/edit/angular-2t157s

...