angular 中的 ngclass 罢工

Question

我正在 angular 做一个项目。当我单击复选框时，我希望文本中有一条线。但是当我点击复选框时没有任何反应..

你能帮帮我吗？

谢谢！

  <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

首先，在 Angular 中是 [(ngModel)]，而不是 AngularJs 中的 ng-model。

此外，您不能使用单个变量 (deleted) 来处理 *ngFor.

中的所有项

要使其生效，请应用更改：

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

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

DEMO

Answer 2

使用 <s> 标签代替 <strike> 标签前任：如果你想要 <strike> Not Aailable </strike> angular4及以上版本不支持，使用 <s>Not Available</s>

angular 中的 ngclass 罢工

ngclass strike in angular

html

checkbox

strikethrough

angular