Функция щелчка флажка не работает угловая 4 - PullRequest
Новая
       45

Функция щелчка флажка не работает угловая 4

0 голосов
/ 27 мая 2019

У меня есть эти данные из другого компонента на основе активного тега при щелчке строки я нажимаю 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 компонент

получение идентификатора службы и отправка его на основе щелчка строки 

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? Любая помощь? Спасибо

Ответы [ 2 ]

0 голосов
/ 27 мая 2019

Если вы хотите добиться двухстороннего связывания данных, используйте следующий код:

В файле foo.html 

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

В файле App.module.ts import {FormsModule} из '@angular/ forms '; 

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

Если вы хотите, чтобы флажок срабатывал при событии пожара, используйте (onClick) = "somemethod ()" в файле foo.html и определите метод в файле foo.ts.

0 голосов
/ 27 мая 2019

(ngModelChange) - это @Output из ngModel directive. Он срабатывает, когда модель меняется. Вы не можете использовать это событие без действительной директивы ngModel. Однако (change) событие связано с классическим событием изменения ввода. взгляните на stackblitz , Подробнее о (изменить) против (ngModelChange) в угловых при здесь

...