Question

export class TestComponent implements OnInit {
    models: Model[];
    ngOnInit() {
        // a bunch of Observable pipes and subscriptions one of which sets the models
    }
    add(): void {
        let newModel = {...};
        this.models.push(newModel);
    }
}

和HTML：

<form *ngIf="models" (ngSubmit)="onSubmimt()" #modelForm="ngForm">
    <div *ngFor="let model of models; last as isLast">
        <input name="..." [(ngModel)]="model.name" />
        <button *ngIf="isLast" (click)="add()">Add</button>
    </div>
</form>

将一些数据放入表单中并单击“添加”按钮后，以前输入的数据全部消失了。我对其进行了调试，发现在Angular框架在drainMicroTaskQueue()中调用zone.js之后，数据就消失了。

有什么想法吗？

编辑：数据已从表单中删除，但仍存在于模型本身中。

EDIT2：每次推送后，视图都会重复添加新模型并丢弃数组中的其他模型。

Answer 1

当您单击“添加”按钮时，您试图添加新模型-如果您只是在更新模型，请尝试在单独的数组中推送模型的新值，然后将其分配给models数组

喜欢

add(): void {
        let anyArray: any[] = [];
        anyArray = [...this.models];
        let newModel = {...};
        anyArray.push(newModel);
        this.models = [...anyArray];
    }

上面的方法将起作用-如果不能，您也可以尝试以下方法

add(): void {
            let newModel = {...};
            this.models = Object.Assign({}, newModel);
        }

感谢快乐编码！

Answer 2

问题已解决：对于所有新添加的使Angular感到困惑的模型，输入的name属性都相同。

阵列角形模型

2 个答案: