Question

    //here is my app.component.html code 

    <div class="container">
      <div class="row">
        <div class="col-12">
          <form #todoForm= "ngForm"(ngSubmit)="todoSubmit(todoForm.value);todoForm.resetForm()">
            <div class="form-group">
              <h1 class="text-center text-primary">Todo App</h1>
              <div class="input-group-prepend">
                <input type="text" class="form-control" placeholder="Add Todo" name="todo" [(ngModel)]="value">
                <span class="input-group-text" (click)="addTodo()"><i class="material-icons">add</i></span>
              </div>
            </div>

我想使用Angular中的[ngClass]将带有复选框的输入绑定到CSS类，以便当用户单击复选框时，将触发直通！我想在我的app.html中添加具有条件的类（.is-done）

            <div [ngClass]= "'is-done'">
              <ul class="list-unstyled">
                <li *ngFor="let todo of todos">
                  {{todo}}
                  <i class="material-icons" (click)="deleteItem(todo)">delete</i>
                  <input type="checkbox" (click)="onToggle()">
                </li>
              </ul>
            </div>
          </form>
        </div>
      </div>
    </div>

在TS代码上，我添加了一个功能，以便用户单击数据时应更改为相反的方向

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


@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})


export class AppComponent  {
  value: string;
  todos = [];
  data = false;

 addTodo(value) {
    if(value !== ""){
    this.todos.push(this.value)
    } else {
      alert ("do something!")
    }
  }

  deleteItem(todo) {
    for (let i=0; i <= this.todos.length; i++) {
      if(todo == this.todos[i]){
        this.todos.splice(i, 1)
      }
    }
  }

  todoSubmit(value: any) {
    if(value !== ""){
      this.todos.push(this.value)
    } else {
      alert('do something !')
    }
  }

  onToggle(data) {
    this.data = !this.data;
  } 
}

Answer 1

鉴于您希望将类is-done绑定到您的复选框的值是否为true，我们可以通过使用现有代码并添加以下内容来做到这一点：

您的模板

中已有复选框

<input type="checkbox" (click)="onToggle()">

在您的组件中，onToggle()看起来像

data: boolean = false;
onToggle(){
    this.data = !this.data; // flips the value of data
}

然后我们可以动态地应用类is-done的css（仅在data === true，即选中复选框时应用），如下所示：

<div class="data" [class.is-done]="data">
    <!-- ... -->
</div>

现在，选中此复选框将设置data的值，并将在is-done时将类data === true的css应用于div。

Answer 2

好的，根据您提供的信息，我尝试解决您的问题。对我来说，似乎您想删除已完成的所有待办事项。因此，您有2个选项，您可以像这样将状态变量添加到todo模型中：

todo.model.ts

export class Todo {
   title: string;
   done: boolean;

   constructor(title: string, done: boolean) {
       this.title = title;
       this.done = done;
   }
}

您应该添加 shared / models / todo.model.ts 之类的结构，并添加上面的代码。还将index.ts添加到相同的文件夹（模型），如下所示：

index.ts

export * from './todo.model';

app.component.ts

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

import { Todo } from 'path'; // Path to models folder, where index.ts resides, that is exporting the model


@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})


export class AppComponent  {
  value: string;
  todos: Todo[] = []; // Init an empty array of Todo Items

 addTodo(value) {
    if(value !== ""){
    this.todos.push(new Todo(value, false)); // Construct a new Todo Item anytime you add a new one
    } else {
      alert ("do something!")
    }
  }

  deleteItem(todo) {
    for (let i=0; i <= this.todos.length; i++) {
      if(todo == this.todos[i]){
        this.todos.splice(i, 1)
      }
    }
  }

  todoSubmit(value: any) {
    if(value !== ""){
      this.todos.push(new Todo(value, false)); // same as mentioned above
    } else {
      alert('do something !')
    }
  }
}

然后在您的app.component.html中：

<ul class="list-unstyled">
  <li *ngFor="let todo of todos" [ngClass]= "{'is-done': todo.done}">
     {{todo}}
     <i class="material-icons" (click)="deleteItem(todo)">delete</i>
     <input type="checkbox" (click)="todo.done = !todo.done">
  </li>
</ul>

如果用户单击复选框，则将其设置为完成，然后使用ngClass将属性绑定到css类。

请记住，要完成这项工作，您需要一个Todo类，并将todo的初始值设置为false / true。该类表示您的待办事项，并且应包含您想添加到待办事项中的任何属性，例如标题：字符串，描述：字符串，时间戳记：日期，完成时间：布尔值

希望这能回答您的问题。

P.S .：第二种方法将涉及构建一个自己的组件todo-item.component，但是您仍然希望拥有一个由上述属性组成的Todo thats类（如果需要的话，还可以包括更多）。

我还添加了一个Stackblitz并在此处实现了所需的行为： https://stackblitz.com/edit/create-bndwdk

最诚挚的问候，

Sagat

如何使用复选框将类添加到输入？

2 个答案: