Я не могу реализовать флажок выбора всех и обычный флажок как два отдельных компонента в Angular 6 - PullRequest
Новая
       65

Я не могу реализовать флажок выбора всех и обычный флажок как два отдельных компонента в Angular 6

0 голосов
/ 10 сентября 2018

Я пытаюсь создать два компонента в Angular 6: компонент «флажок», действующий как обычный флажок, и компонент «выбрать все флажок», который проверяет / снимает флажки всех компонентов флажка.

Чтобы сделать это, я использую сервис с методом, который выдает логическое значение для субъекта: 

areAllCheckedSource = new Subject<boolean>();

selectAllSingle(checked: boolean) {
    this.areAllCheckedSource.next(checked);
}

selectAllSingle() затем вызывается в другом методе компонента «выбрать все флажки» с внутренним логическим значением в качестве аргумента: 

multiCheckStatus: boolean;

constructor (private checkService: SelectAllService ) {
}

checkAll() {
  this.multiCheckStatus = !this.multiCheckStatus;
  this.checkService.selectAllSingle(this.multiCheckStatus);
}

метод checkAll() привязан к свойству (change) элемента HTML-флажка, используемого в шаблоне: 

<input type="checkbox" [checked]="multiCheckStatus" (change)="checkAll()">

Наконец, компонент «checkbox» подписывается на субъекта, чтобы установить его внутреннее логическое значение в соответствии с выдаваемым значением: 

singleCheck: boolean;

  constructor(private multiCheckParent: SelectAllService) {
  }

  ngOnInit() {
    this.multiCheckParent.areAllCheckedSource.subscribe( checked => {
      this.singleCheck = checked;
    });
  }

Моя проблема в том, что компонент флажка не изменяется, чтобы соответствовать компоненту select all; Я заметил, что если я использую BehaviorSubject вместо обычного Subject, начальный логический аргумент передается как аргумент, а последующие значения - нет.

Также вот рабочий пример кода: https://stackblitz.com/edit/angular-ecwlua?file=components%2Fselectall%2Fselectall.component.html селекторы компонента используются в таблице в app.component.html, а имена взяты из массива в mock.ts.

Я довольно новичок в разработке на Angular и не понимаю, является ли это проблемой из-за способа использования подписки или общей реализации. Может кто-нибудь мне помочь? Спасибо.

...