Question

我对Angular2完全陌生，下面的练习需要您的帮助。我需要将文本框中的条目添加到HTML的跨度中。已要求我仅在.ts文件中进行更改

我无法理解需要在AddMore中添加什么，以确保单击复选框旁边的按钮时添加了来自文本框的条目。 请帮助。

Angular.component.html：

<h1>Fresco PLAY Activity Tracker</h1>
<div>
    <div *ngFor="let todo of todos; let i=index" class="todoItem">
        <input type="checkbox" [(ngModel)]="todo.done" />
        <span [ngClass]="{'checked': todo.done}">{{i+1}}. {{ todo.desc }}</span>
    </div>
    <span *ngIf="todos.length == 0">No Activities to track! Start by adding one</span><br/>
    <input id="newTodo" type="text" [(ngModel)]="newToDo">
    <span *ngIf="error" style="color:red;">Please enter an activity!</span>
    <br/>
    <button id="addActivity" (click)="addMore()">Add an Activity!</button>
    <button id="clearAll" (click)="clearAll()">Clear All</button>
</div>

App.component.ts：

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  //Define your variables done,todos,newToDo,newToDoObj,error
 public done: boolean;
  public todos : any;
  public newToDo : string;
  public newToDoObj : any;
  public error : boolean;
  //Define your constructor here with todos as [] ,newToDo as '' and error as false
constructor(){
    this.todos = [];
    this.newToDo = '';
    this.error = false;

  }
  //Define your addMore function here
  //Define your clearAll function here
addMore(){

}
clearAll(){

}
}

Answer 1

Angular活动跟踪器：

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  public done: boolean;
  public todos : any;
  public newToDo : string;
  public newToDoObj : any;
  public error : boolean;
  //public TODOS : Array;
  constructor(){
    this.todos = [];
    this.newToDo = '';
    this.error = false;
  }
  addMore(){
   this.todos.push({done : true, item : this.newToDo});
  }
  clearAll(){
  this.todos = [];
 }
}

Answer 2

public newToDo: string是输入值所在的位置。 public todos: any（应为public todos: Array<string>或public todos: string[]）保存您已创建的所有任务。

单击addMore()按钮后，将调用

addActivity函数。因此，现在在addMore()函数中，您应该获取newToDo的值，并使用todos方法将其推入push()。

addMore() {
this.todos.push(this.newToDo);
}

Angular2：单击按钮将文本框条目添加到跨度

2 个答案: