html - How to get variable from ng-container and compare with another variable

Question

I use the table, and I also have an expandable table, my goal is to display only those rows in the expanded table that refer to the first table. It should show by first the same ID without a second line(underlined with a red line) enter image description here

Here is my code:

import {Component, OnInit, ViewChild} from '@angular/core';
import {Router} from '@angular/router';
import {NotifierService} from 'angular-notifier';
import {MatPaginator, MatTableDataSource} from '@angular/material';
import {IncomeContract} from '../model/incomeContract';
import {Status} from '../model/status';
import {SubjectOfContract} from '../model/subjectOfContract';
import {IncomeContractService} from '../service/income-contract.service';
import {StatusService} from '../service/status.service';
import {SubjectOfContractService} from '../service/subjectOfContract.service';
import {HttpParams} from '@angular/common/http';
import {IncomeAdditional} from '../model/incomeAdditional';
import {IncomeAdditionalService} from '../service/income-additional.service';
import {animate, state, style, transition, trigger} from '@angular/animations';

@Component({
  selector: 'app-income-contract-list',
  templateUrl: './income-contract-list.component.html',
  styleUrls: ['./income-contract-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 IncomeContractListComponent implements OnInit {
  displayedColumns: string[] = ['id', 'number', 'date', 'client',  'subjectOfContract', 'amountOfContract','paymentProcedure',
    'termOfService', 'prepaymentDate', 'executionDate', 'currentAmount', 'controlAmount', 'delay', 'penalty', 'status', 'action'];
  displayedColumnsAdditional: string[] = ['numberOfIncome', 'number', 'date', 'client',  'subjectOfContract', 'amountOfContract','paymentProcedure',
    'termOfService', 'prepaymentDate', 'executionDate', 'currentAmount', 'controlAmount', 'delay', 'penalty', 'status', 'action'];
  dataSource: MatTableDataSource<IncomeContract[]>;
  dataSourceAdditional: MatTableDataSource<IncomeAdditional[]>;
  expandedElement: IncomeContract;
  @ViewChild(MatPaginator) paginator: MatPaginator;
  // @ViewChild(MatSort) sort: MatSort;
  incomeList: IncomeContract[] = [];
  incomeAdditionalList: IncomeAdditional[] = [];
  exportCols = [];
  isCollapsed: boolean = true;
  isCollapsedAdd: boolean = true;
  filter = {
    number: '',
    dateStart: null,
    dateEnd: null,
    client: '',
    status: null,
    subjectOfContract: null
  };
  save_id = {
    contract_number: null
  };
  filterForAdditional = {
    number: '',
    dateStart: null,
    dateEnd: null,
    client: '',
    status: null,
    subjectOfContract: null
  };
  statusList: Status[] = [];
  subjectList: SubjectOfContract[] = [];

  constructor(
    private router: Router,
    private incomeService: IncomeContractService,
    private incomeAdditionalService: IncomeAdditionalService,
    private notifierService: NotifierService,
    private statusService: StatusService,
    private subjectService: SubjectOfContractService) {
    this.dataSource = new MatTableDataSource<IncomeContract[]>([]);
    this.dataSourceAdditional = new MatTableDataSource<IncomeAdditional[]>([]);
  }

  toggleCollapse() {
    this.isCollapsed = !this.isCollapsed;
  }

  toggleCollapseAdd() {
    this.isCollapsedAdd = !this.isCollapsedAdd;
  }

  ngOnInit() {
    this.updateStatusList();
    this.updateSubjectOfContractList();
    // this.restoreCols();
    this.loadData();
    this.loadAdditionalData();
  }

  editIncome(incomeContract: IncomeContract) {
    if (incomeContract != null)
      this.router.navigate(['income/' + incomeContract.id]);
    else
      this.router.navigate(['income']);
  }

  editAdditional(incomeAdditional: IncomeAdditional) {
    if (incomeAdditional != null)
      this.router.navigate(['income-additional/' + incomeAdditional.id]);
    else
      this.router.navigate(['income-additional']);
  }

  addAdditional() {
    this.router.navigate(['income-additional']);
  }

  addIncome() {
    this.router.navigate(['income']);
  }

  removeIncome(incomeContract: IncomeContract) {
    if (confirm('Вы действительно хотите удалить запись?')) {
      this.incomeService.remove(incomeContract.id).subscribe(() => {
        this.loadData();
        this.loadAdditionalData();
        this.notifierService.notify('success', 'Данные успешно удалены');
      });
    }
  }

  removeAdditional(incomeAdditional: IncomeAdditional) {
    if (confirm('Вы действительно хотите удалить запись?')) {
      this.incomeAdditionalService.remove(incomeAdditional.id).subscribe(() => {
        this.loadData();
        this.loadAdditionalData();
        this.notifierService.notify('success', 'Данные успешно удалены');
      });
    }
  }

  loadData() {
    let params = new HttpParams()
      .append('number', this.filter.number)
      .append('client', this.filter.client)
      .append('statusId', this.filter.status == null ? 0 : this.filter.status.id)
      .append('subjectOfContractId', this.filter.subjectOfContract == null ? 0 : this.filter.subjectOfContract.id)

    if (this.filter.dateStart != null)
      params = params.append('dateStart',this.filter.dateStart.getTime());
    if (this.filterForAdditional.dateEnd != null)
      params = params.append('dateEnd',this.filterForAdditional.dateEnd.getTime());

    this.incomeService.getAll({params: params}).subscribe(data => {
      this.incomeList = data;
      this.dataSource = new MatTableDataSource<IncomeContract[]>(data);
      this.dataSource.paginator = this.paginator;
      // this.sort.active = 'id';
      // this.sort.direction = 'desc';
      // this.dataSource.sort = this.sort;
    });
  }

  loadAdditionalData(){
    let params = new HttpParams()
      .append('number', this.filterForAdditional.number)
      .append('client', this.filterForAdditional.client)
      .append('statusId', this.filterForAdditional.status == null ? 0 : this.filterForAdditional.status.id)
      .append('subjectOfContractId', this.filterForAdditional.subjectOfContract == null ? 0 : this.filterForAdditional.subjectOfContract.id)

    if (this.filterForAdditional.dateStart != null)
      params = params.append('dateStart',this.filterForAdditional.dateStart.getTime());
    if (this.filterForAdditional.dateEnd != null)
      params = params.append('dateEnd',this.filterForAdditional.dateEnd.getTime());

    this.incomeAdditionalService.getAll({params: params}).subscribe(data => {
      this.incomeAdditionalList = data;
      this.dataSourceAdditional = new MatTableDataSource<IncomeAdditional[]>(data);
      this.dataSource.paginator = this.paginator;
      // this.sort.active = 'id';
      // this.sort.direction = 'desc';
      // this.dataSource.sort = this.sort;
    });
  }

  // public restoreCols(): void {
  //   this.colRemoved = false;
  //   this.exportCols = [
  //     {utility: 'id', caption: 'ID'},
  //     {utility: 'journal', caption: '№ по журналу'},
  //     {utility: 'startDate', caption: 'Дата начала события'},
  //     {utility: 'endDate', caption: 'Дата завершения события'},
  //     // {utility: 'created', caption: 'Дата создания'},
  //     {utility: 'system', caption: 'Система'},
  //     {utility: 'device', caption: 'Устройство'},
  //     {utility: 'eventTypes', caption: 'События'},
  //     {utility: 'region', caption: 'Узел сети (регион)'},
  //     // {utility: '', caption: 'Длительность' },
  //     {utility: 'problemTickets', caption: '№ ПБ'},
  //     {utility: 'operator', caption: 'Оповещения'},
  //     {utility: 'note', caption: 'Описание'},
  //     {utility: 'description', caption: 'Причина'},
  //     {utility: 'attendant', caption: 'Дежурный'}
  //     // {utility: 'category', caption: 'Категория'}
  //   ];
  //
  // }

  // downloadCSV() {
  //   this.eventService.exportCSV(this.exportCols).subscribe(data => {
  //     let blob = new Blob([data], {type: 'application/vnd.ms-excel'});
  //     let url = window.URL.createObjectURL(blob);
  //     let filename = 'events.csv';
  //     if (navigator.msSaveOrOpenBlob) {
  //       navigator.msSaveBlob(blob, filename);
  //     } else {
  //       let a = document.createElement('a');
  //       a.href = url;
  //       a.download = filename;
  //       document.body.appendChild(a);
  //       a.click();
  //       document.body.removeChild(a);
  //     }
  //     window.URL.revokeObjectURL(url);
  //   });
  // }

  // downloadExcel() {
  //   this.eventService.exportExcel(this.exportCols).subscribe(data => {
  //     let blob = new Blob([data], {type: 'application/vnd.ms-excel'});
  //     let url = window.URL.createObjectURL(blob);
  //     let filename = 'events.xls';
  //     if (navigator.msSaveOrOpenBlob) {
  //       navigator.msSaveBlob(blob, filename);
  //     } else {
  //       let a = document.createElement('a');
  //       a.href = url;
  //       a.download = filename;
  //       document.body.appendChild(a);
  //       a.click();
  //       document.body.removeChild(a);
  //     }
  //     window.URL.revokeObjectURL(url);
  //   });
  // }


//  ----------------------------------------------------------FILTER----------------------------------------------------

  private updateStatusList() {
    this.statusService.getAll().subscribe(response => {
      this.statusList = response;
      let emptyStatus = new Status();
      emptyStatus.id = 0;
      emptyStatus.name = 'Все';
      this.statusList.unshift(emptyStatus);
      this.filter.status = this.statusList[0];
    });
  }

  private updateSubjectOfContractList() {
    this.subjectService.getAll().subscribe(response => {
      this.subjectList = response;
      let emptySubject = new SubjectOfContract();
      emptySubject.id = 0;
      emptySubject.shortName = 'Все';
      this.subjectList.unshift(emptySubject);
      this.filter.subjectOfContract = this.subjectList[0];
    });
  }

  resetFilter() {
    this.filter.number = '';
    this.filter.client = '';
    this.filter.dateStart = null;
    this.filter.dateEnd = null;
    this.filter.status = this.statusList[0];
    this.filter.subjectOfContract = this.subjectList[0];
    this.loadData();
    this.loadAdditionalData();
  }

  resetFilterAdd() {
    this.filterForAdditional.number = '';
    this.filterForAdditional.client = '';
    this.filterForAdditional.dateStart = null;
    this.filterForAdditional.dateEnd = null;
    this.filterForAdditional.status = this.statusList[0];
    this.filterForAdditional.subjectOfContract = this.subjectList[0];
    this.loadData();
    this.loadAdditionalData();
  }
}

// export class SomeComponent {
//   number_contract = '';
//
//   save() {
//     console.log(this.number_contract);
//   }
// }

* {
  margin: 0 0 0 0;
  padding: 0 0 0 0;
}

.example-container {
  display: flex;
  flex-direction: column;
  max-height: 500px;
  min-width: 300px;
}

.mat-table {
  overflow: auto;
  max-height: 500px;
}

.element-row {
  position: relative;
}

.element-row:not(.expanded) {
  cursor: poi

Answer 1

Waitting for answers