Question

我有这些数据来自另一个组件在单击行时基于活动标签，我将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标记中添加点击功能的任何方法吗？有什么帮助吗？谢谢

Answer 1

(ngModelChange)是@Output中的ngModel directive。模型更改时将触发。如果没有有效的ngModel指令，则无法使用此事件。但是(change)事件绑定到经典输入更改事件。 have a look at stackblitz 。有关here处角度的（change）vs（ngModelChange）的更多信息

Answer 2

如果要实现两种方式的数据绑定，请使用以下代码。

在foo.html

MySqlConnection("Server=C:\Users\Utilizador\Desktop\
ClinicaProject\Clinica.mdf ;user id= ;database= Clinica.mdf")
Private Sub Form8_Load(sender As Object, e As EventArgs) Handles MyBase.Load

End Sub

Private Sub VoltarToolStripMenuItem_Click(sender As Object, e As EventArgs) Handles VoltarToolStripMenuItem.Click
    Me.Hide()
    Form1.Show()

End Sub

Private Sub Button1_Click(sender As Object, e As EventArgs) Handles Button1.Click
    Dim cmd As MySqlCommand
    Dim adp As New MySqlDataAdapter
    Dim sql As String
    sql = "Select * From Consultas Where Data = '" & DateTimePicker1.Text & "'"
    Try
        Me.DataSet1.Clear()
        Kon.Open()
        cmd = New MySqlCommand(sql, Kon)
        adp.SelectCommand = cmd
        adp.Fill(Me.DataSet1.Consultas)
        cmd.Dispose()
        adp.Dispose()
        Kon.Close()

    Catch ex As Exception
        Kon.Close()
        MessageBox.Show(ex.Message)

    End Try
    Me.ReportViewer1.RefreshReport()

End Sub

Private Sub DateTimePicker1_ValueChanged(sender As Object, e As EventArgs) Handles DateTimePicker1.ValueChanged

End Sub

在App.module.ts中从'@ angular / forms'导入{FormsModule};

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

如果要单击触发事件，请在foo.html文件中使用（onClick）=“ somemethod（）”，并在foo.ts文件中定义方法。

复选框点击功能无法正常工作4

2 个答案: