angular - Angular 配列の変更検出

Question

私は Angular の初心者ですが、問題の適切な解決策が見つかりません。

アイテムのリストで満たされたテーブルを含むコンポーネントがあり (リスト内の各アイテムは別のコンポーネントにあります)、フィルターを含む 3 番目のコンポーネントがあります。フィルターには、複数のチェックボックスとフィルター ボタンが含まれています。

チェックボックスの状態のブール配列をfilterComponentからitemsListComponentを介してsingleItemComponentに送信すると、正常に動作します。私の問題は変更検出です。異なる NgDoCheck を使用した場合、フィルター ボタンのみの代わりにチェックボックスとフィルター ボタンをクリックすると常に機能します。

NgOnChanges を試しましたが、一度しか機能せず、配列への値の変更は見られませんでした。

これは私の SingleItemsComponent です (これを解決するために他の人は必要ないと思います)。これを見て、この問題を解決する例を教えてください。

import { Component, OnInit, OnChanges,ViewChild, AfterViewInit, Inject,     Input, DoCheck, KeyValueDiffer, KeyValueDiffers, SimpleChanges, SimpleChange,     ChangeDetectionStrategy, ChangeDetectorRef, IterableDiffers } from     '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { animate, state, style, transition, trigger } from     '@angular/animations';
import { MatTableDataSource, MatPaginator, MatSort,     throwToolbarMixedModesError } from '@angular/material';
import { IPOLine } from 'src/app/models/po-line';
import { POLineService } from 'src/app/services/po-line.service';
@Component({
  selector: 'app-po-lines-list',
  templateUrl: './po-lines-list.component.html',
  styleUrls: ['./po-lines-list.component.css'],
  animations: [
    trigger('detailExpand', [
      state('collapsed', style({ height: '0px', minHeight: '0', display:     'none' })),
      state('expanded', style({ height: '*' })),
      transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4,     0.0, 0.2, 1)')),
    ]),
  ],
})
export class POLinesListComponent implements OnInit, DoCheck{
  isLogged = false;
  login: string;
  dataSource = new MatTableDataSource<IPOLine>();
  expandedElement: IPOLine;
  errorMessage: string;
  response: any;
  today = new Date(); // (1990, 0, 1);
  isLoadingList = true;

  differ: any;

  @Input() sentData: boolean[];
  _sentData = this.sentData;
  ngDoCheck(){

    var changes = this.differ.diff(this._sentData);
    if (changes){
      console.log('changes detected changes detected changes detected     changes detected changes detected ');
    }
    else
    console.log('changes not detected changes not detected changes not     detected changes not detected ');
  }


  @ViewChild(MatPaginator) paginator: MatPaginator;
  @ViewChild(MatSort) sort: MatSort;

  constructor(
    //private cd: ChangeDetectorRef,
    private differs: KeyValueDiffers,
    private _POLineService: POLineService,
    private activatedRoute: ActivatedRoute) {
      this.differ = differs.find({}).create();
  }

  ngOnInit() {
    // Assign the data to the data source for the table to render
    this.login = this.activatedRoute.snapshot.paramMap.get('login');
    this._POLineService.getUserPOLines(this.login)
      .subscribe(data => {
        this.dataSource.data = data;
          },
        error => {
          this.errorMessage = <any>error;
          this.isLoadingList = false;
        }
        ,
        () => {
          // console.log('eee' + this.dataSource.data);
          this.isLoadingList = false;
          this.dataSource.data.forEach(x => x.isExpired = new     Date(x.PromisedDate) < new Date() ? true : false);
        }
      );

    this.dataSource.paginator = this.paginator;
    this.dataSource.sort = this.sort;
  }
}

I'm sorry for the mess in a code but I tried so many things i don't even remember what was what. Thanks for any help.

FilterComponent.ts:

import { Component, OnInit, Output, EventEmitter, Input } from '@angular/core';

@Component({
  selector: 'app-filters',
  templateUrl: './filters.component.html',
  styleUrls: ['./filters.component.css']
})
export class FiltersComponent implements OnInit {

  @Output() filterByClass = new EventEmitter();
  filterByTTR = false;
  filterByTBR = false;
  filters:boolean[] = [];
  constructor() { }

  ngOnInit() {
  }

log() {
  if(!this.filterByTTR)
   console.log('TTR not checked');
   else
   console.log('TTR checked');
  if (!this.filterByTBR)
   console.log('TBR not checked');
   else
   console.log('TBR checked');
   this.filters[0] = this.filterByTTR;
   this.filters[1] = this.filterByTBR;

   this.filterByClass.emit(this.filters);
}

Part of FilterComponent.html:

<mat-card-content class="col">
<mat-checkbox [checked]="filterByTTR" (change)="filterByTTR = !filterByTTR">TTR</mat-checkbox>
<mat-checkbox [checked]="filterByTBR" (change)="filterByTBR = !filterByTBR">TBR</mat-checkbox>
<!-- <mat-checkbox [(ngModel)]="filterByTBR"ref-TBR>TBR</mat-checkbox> -->
<div class="d-flex justify-content-between">
  <button mat-raised-button  color="primary">Clear</button>
  <button mat-raised-button (click)="log()" color="primary">Apply</button>
</div>

PoLinesCompoenent.ts:

import { Component, OnInit, NgModule, ViewChild, Input } from 
'@angular/core';

@Component({
  selector: 'app-po-lines',
  templateUrl: './po-lines.component.html',
  styleUrls: ['./po-lines.component.css']
})    
export class POLinesComponent implements OnInit {
  count: boolean[];
  constructor() { }    
  ngOnInit(){}      
  displayCounter(count) {
    console.log('first value is: ' + count[0] + ' second value is: ' +     count[1]);
    this.count = count;
  }

PoLinesComponent.html:

<div class="container">
  <div class="row">
    <div class="side-bar col">
      <app-filters (data)='displayCounter($event)'></app-filters>
    </div>
    <div class="content col">
      <app-po-lines-list [sentData]="count"></app-po-lines-list>
    </div>
  </div>
</div>