ngclass 有角度的罢工答案

【问题标题】：ngclass strike in angularngclass 有角度的罢工
【发布时间】：2017-10-13 09:29:18
【问题描述】：

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

你能帮帮我吗？

谢谢！

  <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>

【问题讨论】：

你的 li 标签关闭了吗？并尝试将 ng-true-value 提供给已检查的输入

标签： html angular checkbox strikethrough

【解决方案1】：

使用<s> 标签代替<strike> 标签前任：如果你想要<strike> Not Aailable </strike> 并且它不受 angular 4 及更高版本的支持，使用<s>Not Available</s>

【讨论】：

【解决方案2】：

起初，在 Angular 中它是 [(ngModel)]，而不是 ng-model，如 AngularJs。

此外，您不能使用单个变量 (deleted) 来处理 *ngFor 中的所有项目。

为了使它可以应用更改：

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

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

DEMO

【讨论】：

“它不起作用” 太含糊了。为什么它不起作用？有什么错误吗？另外，不要根据我的回答编辑您的代码。请回滚您的更改并保留原始代码！
没有错误，但是当我点击复选框时没有任何反应
我在回答中包含了一个演示。请检查一下。
我检查了它，但我没有在 .ts 文件中编写我的代码，我将我的代码编写在一个 .html 文件中，然后我将此模板加载到我的 .ts 文件中。但是我尝试了您的方式并将代码添加到 .ts 文件中的组件中，但它仍然无法正常工作。当我点击复选框时没有发生
什么？伙计.. 这只是我为了证明我建议的方法确实有效而制作的一个 plunker (DEMO)。你在哪里写你的模板没有什么区别..你可以把它写在模板或单个文件中，这是一样的！顺便问一下，你的 CSS 中有什么，特别是 strike class？