点击事件在Angular 5

Question

下面有我在HTML / CSS中复制过的截图。

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

现在，我已经在我的角度组件中使用了小提琴中提到的代码。我在代码中使用的角度组件的片段如下所示：

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

当你在这里时，我建议查看角度教程以更熟悉框架。