Как добавить класс к входу с флажком?

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>

Я хочу связать вход с флажком с классом CSS, используя [ngClass] в Angular, чтобы при нажатии на этот флажок проходной канал запускался! Я хочу добавить класс (.is-done) с условием в моем app.html

            <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

Хорошо, согласно предоставленной вами информации, я пытаюсь решить вашу проблему.Для меня кажется, что ты хочешь зачеркнуть любой заданный пункт.Таким образом, у вас есть 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>

Установите, чтобы сделать, если пользователь нажимает на флажок, а затем связать свойствок классу css с помощью ngClass.

Помните, что для этой работы вам нужен класс Todo и установите начальное значение todo на false / true.Класс представляет ваш элемент задачи и должен состоять из любого атрибута, который вы хотите добавить в задачу, например заголовок: строка, описание: строка, отметка времени: дата, выполнено: логическое

Надеемся, что это ответ на ваш вопрос.

PS: Второй подход будет включать создание собственного компонента todo-item.component, но все же вы захотите иметь класс Todo, состоящий из вышеупомянутых атрибутов (и больше, если вам это нужно).

Я также добавил Stackblitz и реализовал требуемое поведение здесь: https://stackblitz.com/edit/create-bndwdk

С уважением,

Сагат

Answer 2

Учитывая, что вы хотите, чтобы класс is-done был связан с тем, является ли значение вашего флажка истинным, мы можем сделать это, используя существующий код и добавив следующее:

У вас есть установленный флажок в вашем шаблоне

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

и в вашем компоненте , onToggle() может выглядеть как

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

тогда мы можем применить CSS класса is-done динамически (применяется только тогда, когда data === true, то есть когда флажок установлен), например:

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

и теперь, когда флажок установлен, устанавливается значение data, и это приведет к тому, что CSS класса is-done будет применен к div, когда data === true.