在第一次单击提交按钮后，我看不到双向绑定值

Question

我正在尝试使用id = items将输入项添加到div中。

它似乎在第一次提交点击时有效，但之后失败。

我观察到，第一次提交单击后，双向数据绑定似乎消失了。

HTML代码：

    <form>
        <input type="text"name="item"
        [(ngModel)]="test.text"> 
        <br> 
        <p>{{test.text}}</p> <!--disappears after the first 
        button click-->

        <input type="submit" value="Add" 
        (click)="addItem()">
    </form>
    <div id="items" *ngFor="let goal of goals">
        <p>
          {{ goal.text }}
        </p>
        <p>
          {{ goal.num }}
        </p>

    </div>

在我的组件文件中，我试图将用户输入推入数组，并使用上面的ngFor语法在数组中循环，但是在第一个结果之后它将返回空。

goals = [];
test: any = {text: "ok", num: "789"};

addItem() {
    this.goals.push(this.test);
    this.test = '';
    this.itemCount = this.goals.length;
 }

我哪里出问题了？ 预先感谢。

Answer 1

在您的addItem函数中，只需对此进行更改

addItem() {
 this.goals.push(this.test);
 this.test = '';
 this.itemCount = this.goals.length;
}

到

addItem() {
 this.goals.push({...this.test});
 this.test.text = '';
 this.itemCount = this.goals.length;
}