复选框单击功能不起作用角度 4答案

【问题标题】：Checkbox click function is not working angular 4复选框单击功能不起作用角度 4
【发布时间】：2019-10-12 20:34:07
【问题描述】：

我有来自另一个组件的数据在单击行时基于活动标记，我将 Id 推送到复选框输入字段的 ngModel。行点击工作正常，复选框正在添加/删除数据但是现在当我单击复选框本身时，它不会执行任何操作，例如复选框单击功能不起作用我该如何解决？

html 组件

<ngb-panel [disabled]="true" *ngFor="let testPanel of otherTests; let i = index;" id="{{testPanel.Id}}" [title]="testPanel.Name">
  <ng-template ngbPanelTitle>
    <div class="action-items">
      <label class="custom-control custom-checkbox">
          <input
            type="checkbox"
            class="custom-control-input"
            [name]="testPanel.Id + '-' + testPanel.Moniker"
            [ngModel]="panelIds.indexOf(testPanel.Id) > -1"
            (ngModelChange)="onPanelCheckboxUpdate($event, testPanel)"
            [id]="testPanel.Id + '-' + testPanel.Moniker">
          <span class="custom-control-indicator"></span>
      </label>
    </div>
  </ng-template>
</ngb-panel>

ts 组件

从服务中获取 ID 并根据行点击推送它

this.testOrderService.refreshRequestsObservable().subscribe(
  data => {

    this.panelActive = data.active;
    let testFilteredArray = lodash.filter(this.otherTests, item => item.Id === data.id);

    if (this.panelActive) {
      // is checked
      this.panelIds.push(data.id);
      if(testFilteredArray.length > 0){
        this.selectedPanels.push(testFilteredArray[0]);
      }
    }
    else {
      //is false
      this.panelIds = this.panelIds.filter(obj => obj !== data.id);
      this.selectedPanels = this.selectedPanels.filter(obj => obj.Id !== data.id);
    }

    // this.panelIds = lodash.uniq(this.panelIds);
    this.selectedPanels = lodash.uniqBy(this.selectedPanels, "Id");

    this.updateSession();

  }
)

复选框功能

onPanelCheckboxUpdate($event: boolean, panel: TestOrderPanel) {
let testPanelIds = panel.Tests.map(test => test.Id);
// Wipe any duplicates
this.panelIds = this.panelIds.filter(
  panelId => panel.Id !== panelId && testPanelIds.indexOf(panelId) === -1
);
this.selectedPanels = this.selectedPanels.filter(
  selectedPanel =>
    panel.Id !== selectedPanel.Id &&
    testPanelIds.indexOf(selectedPanel.Id) === -1
);

if ($event) {
  this.panelIds.push(panel.Id);
  this.selectedPanels.push(panel);
 }
 this.updateSession();
 }

此复选框功能不起作用，不会让我更改复选框的值。

还有什么方法可以在 ngbPanel 标签中添加点击功能？有什么帮助吗？谢谢

【问题讨论】：

它会转到你调用的方法吗？
@Naveen 哪个方法？

标签： javascript angular typescript checkbox panel

【解决方案1】：

如果要实现双向数据绑定，请使用以下代码。

在 foo.html 中

<input [(ngModel)]="checBxFlag" type="checkbox"/>

在 App.module.ts 中从“@angular/forms”导入 { FormsModule }；

@NgModule({
  imports: [
    [...]
    FormsModule
  ],
  [...]
})

如果您想要触发事件单击复选框，请在您的 foo.html 文件中使用 (onClick)="somemethod()" 并在 foo.ts 文件中定义方法。

【讨论】：