Angular 4- Ng- 模型未按预期工作

Question

我正在尝试处理需要在其中添加一些动态字段的表单。我将这些动态条目存储在一个数组中。问题是当我将我的输入字段与 Ng-Model 绑定时，它一次只允许我输入一个字符。

即如果我尝试输入例如'test'，我只能输入't'，要输入下一个字符，我必须再次点击输入框，然后输入下一个字符。没有 ngModel 一切正常，但我需要使用 ngModel 才能使我的场景正常工作。下面是代码：

HTML:

<form #personalForm="ngForm" class="editForm" novalidate>
    <tbody>
        <tr *ngFor="let value of personal.array; let i = index">
            <td>
                <div class="input-group">
                    <div class="input-group-prepend">
                        <div (click)="deleteFieldValue(i)" class="input-group-text"><i class="mdi mdi-close mdi-18px"></i></div>
                    </div>
                    <input type="text" class="form-control input-md" [(ngModel)]="personal.array[i]" name="{{[i]}}" placeholder="item name">
                </div>
            </td>
        </tr>
        <tr>
            <td align="right">
                <button class="btn btn-success btn-sm" type="button" (click)="addFieldValue()" style="margin-right:10px">Add More Item</button>
                <button (click)="onEditCloseItems()" class="btn btn-primary btn-sm" type="button">Save Items</button>
            </td>
        </tr>
    </tbody>
</form>

打字稿：

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { FormGroup, FormControl, FormArray, Validators } from '@angular/forms';
import { Personal } from '../data/formData.model';
import { FormDataService } from '../data/formData.service';

@Component({
    selector: 'app-personal',
    templateUrl: './personal.component.html'
})

export class PersonalComponent implements OnInit {

    personal: Personal;
    form: any;
    newAttribute = '';
    isEditItems: boolean;

    constructor(private router: Router, private formDataService: FormDataService) { }

    ngOnInit() {
        this.personal = this.formDataService.getPersonal();
        console.log('Personal feature loaded!');
    }

    save(form: any): boolean {
        if (!form.valid) {
            return false;
        }

        this.formDataService.setPersonal(this.personal);
        return true;
    }

    goToNext(form: any) {
        if (this.save(form)) {
            // Navigate to the work page
            this.router.navigate(['/work']);
        }
    }

    addFieldValue() {
        if (this.personal.array.length <= 8) {
            this.personal.array.push(this.newAttribute);
        } else {

        }
    }

    deleteFieldValue(index) {
        this.personal.array.splice(index, 1);
    }

    onEditCloseItems() {
        this.isEditItems = !this.isEditItems;
    }
}

formModel.ts 文件：

export class Personal {
    firstName: string = '';
    lastName: string = '';
    email: string = '';
    array: string[] = [];
}

表格截图如下：

这里的问题出在数组的动态输入文本字段中，我只能在这些字段中输入一个字母表。要输入下一个字母表，我必须再次单击输入字段，请任何人解释为什么会发生这种情况并提供解决方案。

谢谢

Answer 1

Stackblitz example

将 trackBy 添加到您的 HTML：

<tr *ngFor="let value of personal.array; let i = index; trackBy: trackByFn">

添加到您的 TypeScript：

trackByFn(index: any, item: any) {
    return index;
}

Angular 4- Ng- 模型未按预期工作

Angular 4- Ng- Model not working as expected

angular

angular-forms