ngclass strike in angular

Question

I'm making a project in angular. When i click on the checkbox i want that there is a line trough the text. But when i click on the checkbox nothing happens ..

Can you help me ?

Thanks !

  <h3>Todos list</h3>
<ul class="list-group">
   <li *ngFor="let todo of todos; let i = index" class="list-group-item">
     {{todo.text}}
 <p [ngClass]="{strike: deleted}">test</p>

<label>
   <input type="checkbox" ng-model="deleted">
</label>

<button class="btn btn-danger btn-small" (click)="deleteTodo(i)">X</button>
    </li>
</ul>

Answer 1

At first, in Angular it's [(ngModel)] , not ng-model as in AngularJs .

Also, you can't have a single variable ( deleted ) to handle all items in your *ngFor .

To make it wok apply the changes:

...
<p [ngClass]="{strike: todo.deleted}">test</p> 

<label>
  <input type="checkbox" 
         [(ngModel)]="todo.deleted"> 
</label> 
...

DEMO

Answer 2

使用<s>标记代替<strike>标记例如：如果您想要<strike> Not Aailable </strike>并且<strike> Not Aailable </strike> 4及更高版本支持，则使用<s>Not Available</s>