输入和提交的内容仍然连接

Question

所以，我有一个输入字段，当按下回车键或添加任务按钮时，应该在屏幕上创建一个新元素。问题是，在提交我在输入字段中键入的任何内容后，它仍然连接到创建的新元素。我的意思是，如果我更改输入字段中输入的内容，它也会更改我提交的内容，这不是我想要的。这是屏幕截图的示例。

在屏幕截图中，您可以看到我输入了 hello 并将其添加为任务，从而创建了一个新元素。但是，当我删除 'o' 时，顶部的部分也被删除：

这是我的代码：

HTML 文件:

 <div fxFlex="25" fxLayout="column" id="to-do" class="tile">
        <h2 class="heading">To-Do</h2>
        <table>
            <tr *ngFor="let todo of todos; let indexOfElement=index">
                <td><mat-checkbox color="primary">{{todo.title}}</mat-checkbox></td>
                <td><mat-checkbox color="primary"><input type="text" class="editable" [(ngModel)]="todo.title"></mat-checkbox></td>
                <td class="right-align"><button class="edit-button"><mat-icon class="edit-icon">edit</mat-icon></button></td>
                <td class="right-align"><button class="delete-button"><mat-icon class="delete-icon" (click)="deleteItem(indexOfElement)">delete_outline</mat-icon></button></td>
            </tr>
        </table>
        <input 
            type="text" 
            placeholder="Enter task..." 
            [(ngModel)]="newItem.title"
            (keyup.enter)="addItem()">
        <button 
            mat-button 
            color="primary"
            (click)="addItem()">Add Task</button>
    </div>

打字稿文件：

export class DashboardComponent implements OnInit {
  currentUser: User;
  user: User;
  firebaseUser: firebase.User;

  todos: Item[] = [];  // an array of todo items. This array contains Item objects.
  index : Number = 0;

  newItem: Item = { // this is an Item object already created. 
    id: '',
    title: '',
    done: false,
    editing: false,
    priority: 0
  }


  constructor(public auth: AngularFireAuth, private service: UserService, private itemservice: ItemService) { }

  //this.itemsCollection = this.afs.collection<Item>('todo-items');

  ngOnInit(): void {
    this.auth.user.subscribe(user => {
      this.firebaseUser = user;
      console.log('my current users uid', this.service.get(this.firebaseUser.uid));
      this.service.get(user.uid).subscribe(user => this.user = user);
    });
    //this.getItems();
  }

  //function skeletons set up below. Edit will come later.

  addItem(){
    // set the properties for newItem here.
    // title = the thing they entered in the input
    // done = false
    // editing = false
    // priority = 1
    // you can leave the id property blank.
    // add this newItem to the todos[] array (figure out how to add an element to an array in typescript)
    // call this.itemservice.addTask() to add the item to the firestore todo-items collection.

    this.todos.push(this.newItem = {
      id: '',
      title: this.newItem.title,
      done: false,
      editing: false,
      priority: 1
    })
    
  }

  deleteItem(index){
    console.log(index);
    this.todos.splice(index, 1);
    // remove the item from the array
    // call this.itemservice.deleteTask() to remove the task from the firestore todo-items collection.
  }

}

我到底做错了什么？

编辑：将屏幕截图更改为实际代码

Answer 1

我认为问题是在字段 title 中您没有传递值 - 您传递的是对该值的引用。

title: this.newItem.title,

我认为你应该在 addItem 函数中创建 Item 的新实例，但如果你出于某种原因不想这样做，你可以使用例如组合将引用转换为值JSON.stringify 和 JSON.parse.

const newTitle: string = JSON.parse(JSON.stringify(this.newItem.title));
this.todos.push({
  id: '',
  title: newTitle,
  done: false,
  editing: false,
  priority: 1
})

输入和提交的内容仍然连接

Input and submitted content still connected

angularjs