点击事件在 Angular 5 中无法正常工作

Question

我在下面有一个截图，我用 HTML/CSS 复制了它。

我为上面的截图创建了fiddle。小提琴的工作方式是当我点击等待文本的项目时，它会变为收到文本的项目，反之亦然。

现在，我在我的角度组件中使用了小提琴中提到的代码。我在代码中使用的角度组件的sn-ps如下所示：

HTML：

<tr>
   <td class="left">Fred Doe's Guest 1</td>
   <td class="number1">250</td>
   <td class="table1">2</td>
   <td class="right-itemswaiting" (click)="textChange()">
      <div class="fold" data-filled="true">
         <div class="square white"></div>
         <span class="items-text">Items Waiting</span>
      </div>
   </td>
</tr>

打字稿：

export class AdminManageAttendeesComponent implements OnInit 
{
constructor() { }
ngOnInit() {
}


textChange(){    
$(document).on('click', '.fold', function(e) {
var filled = !($(this).data('filled'));
$(this).data('filled', filled);
$(this).find(".items-text").text(filled ? "Items Waiting" : "Items Received");
$(this).find(".square").toggleClass("white", filled);
});
}
}

问题陈述：

上面的小提琴工作得很好但是当我在我的角度组件中使用它时，文本更改发生在双击但在小提琴中它发生在单击一次。

我不知道如何在角度上做出小提琴，否则我更容易准确地展示发生了什么。

我想知道我需要在上面的代码中进行哪些更改，以便单击一次即可更改文本。

Answer 1

如果没有 jquery，我对此的看法是这样的：

   <td class="right-itemswaiting" (click)="filled=!filled">
      <div class="fold" data-filled="true">
         <div class="square" [class.white]="!filled"></div>
         <span #text class="items-text">{{this.filled ?'Items Received': 'Items Waiting'}}</span>
      </div>
   </td>

当然可以用方法优化文本。
DEMO

Answer 2

该实现尽可能远离角度。

做这样的事情：我要添加一些伪代码。

<checkbox [(ngModel)]="isReceived" (ngModelChange)="someFun()"></checkbox>
<label> {{isReceived ? 'Items Received' : 'Items Waiting'}}</label>

在您的打字稿文件中，

isReceived: boolean;

constructor() {
   this.isReceived = initializeLogic() || false;
}

initializeLogic(): boolean {
    //if you want to initialize it any other way.
}

someFun() {
//do any other logic (not UI) associated with model change.
}

当您使用它时，我建议您查看 Angular 教程以更熟悉该框架。