В Angular 6 односторонняя привязка флажка с [ngModel] не работает - PullRequest
Новая
       11

В Angular 6 односторонняя привязка флажка с [ngModel] не работает

0 голосов
/ 02 октября 2018

Мы разрабатываем приложение с Angular 6 и NgRX (Redux-Pattern).У меня есть флажок в моем шаблоне discovery.component.html : 

<label>
  <input type="checkbox" name="wrongSpelling"
    [ngModel]="state.wrongSpelling" (click)="toggleWrongSpelling($event)" />
  Wrong Spelling
</label>

В соответствии с Redux-шаблоном поток данных должен выглядеть так:

  1. Пользователь нажимает на флажок.Флажок не переключен, но отправлено действие обновления.Также state является не обновленным ( Одностороннее связывание )

  2. render() вызывается с новым состоянием и собновленный объект.Обновленный объект назначен компоненту.

  3. Состояние флажка должно обновляться в зависимости от обновленного объекта.

Соответствующий код discovery.component.ts указано ниже: 

public state;

render(state) {
  if (state.discovery) {
    this.state = state.discovery;
  }
}    

toggleWrongSpelling(event) {
  event.preventDefault();
  this.discoveryAction.update({
    wrongSpelling: !this.state.wrongSpelling // it's safe that state exists here
  });
}

Однако флажок не проверяется при нажатии .

Вещи, которые я пытался(без успеха):

  • Отладка render(): this.state.wrongSpelling действительно переключается каждый раз, когда я нажимаю на флажок
  • создать элемент в моем DiscoveryComponent wrongSpelling, который переключаетсяв toggleWrongSpelling() и прочитайте в шаблоне (вместо состояния) (я думал о стратегиях changeDetection, которые могут быть проблемой здесь)
  • использовал [value], [checked] и (для тестирования) [(ngModel)]вместо [ngModel] в шаблоне
  • заменил Wrong Spelling на {{ state.wrongSpelling }}, чтобы посмотреть, есть ли проблема синхронизации
  • использовал оператор безопасной навигации: [ngModel]="state?.wrongSpelling"

так что проблема в шаблоне. Что здесь может быть не так?

1 Ответ

0 голосов
/ 17 января 2019

Как насчет использования опции 'noop'?Пожалуйста, попробуйте добавить следующий код в ваш компонент. 

import { MAT_CHECKBOX_CLICK_ACTION } from '@angular/material';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.html',
  styleUrls: ['./your-component.css'],
  providers: [
    { provide: MAT_CHECKBOX_CLICK_ACTION, useValue: 'noop' }
  ],
})

опция 'noop' предотвращает изменение значения флажка. 

noop
Do not change the checked value or indeterminate value. 
Developers have the power to implement customized click actions.

https://material.angular.io/components/checkbox/overview

...