Дочерний компонент не скрывает элементы

#javascript #angular #typescript

Вопрос:

сделки-транзакция.компонент отображает приложение-сделки-компонент утверждения и приложение-таблица-компонент с несколькими сортировками

deals-approval.component.html отображает другой повторно используемый компонент, который является компонентом приложения-таблицы-мультисортировки.

быстрое обновление — он скрывается сейчас, но требуется около 1 минуты, прежде чем он скроется. какие-нибудь проблемы ?

Я хочу, чтобы, если todalDealsForApproval от deals-approval.component равен 0, он должен скрывать элементы deals-approval.component, но проблема сейчас в том, что даже я поставил ngIf, и даже условие правильное, элемент в deals-approval.component не может быть скрыт или скрыт.

Это из-за отношения ребенка к ребенку ? любая идея, пожалуйста . Спасибо.

#сделки-транзакция.html-код компонента

 <app-deals-approval  [transaction]="transaction">
  </app-deals-approval>
  <app-table-multi-sort (dataServiceEvent)="dealsServiceEvent($event)" [tableOptions]="tableOptions" [tableData]="data"
    (tableActionsEvent)="tableActions($event)"></app-table-multi-sort>
 

#html-код компонента утверждения сделок — я хочу скрыть эти элементы на основе условия или если условие истинно

 <div style="padding-bottom: 20px;" >
    <div class="alertInfo" >
      <mat-icon>info</mat-icon>This deal was sent to approval and waiting for approval.
    </div>
    <app-table-multi-sort (dataServiceEvent)="dataForApprovalServiceEvent($event)" [tableOptions]="tableOptions" [tableData]="data"></app-table-multi-sort>
</div>
 

#код ts компонента утверждения сделок

 export class DealsApprovalComponent implements OnInit {
  transactionSubscripion: Subscription;
  @ViewChild(TableMultiSortComponent, { static: true }) tableMultiSortComponent: TableMultiSortComponent;
  tableOptions: any;
  @Input() transaction: any;
  @Input() dataTest: any;
  isLoading: boolean;
  totalDeals : number;
  accountId: any;
  data: any;
  searchInput: string;
  table: any;
  todalDealsForApproval: number;
  constructor(
    private dealService: DealService,
    private notificationService: NotificationService,
    private trasactionService: TransactionService
    
  ) {
    this.transactionSubscripion =
      this.trasactionService.transactionEvent$.subscribe(
        (data) => {
          if (data) {
            switch (data['operation']) {
              case 'transaction/update':
                this.table.pageIndex = 0;
                this.table.pageSize = 10;
                this._pageEventDealsForApprovalList();
                break;
            }
          }
        },
        (error) => {}
      );
  }
  ngOnInit(): void {
    const currentAccountDetails = localStorage.getItem('currAcct') as any;
    if (currentAccountDetails) {
      this.accountId = JSON.parse(currentAccountDetails).accountId;
    }

    this.tableOptions = {
      columns:[
        {id:'name',name:'Deal Name',subId:'type', subtitle:'Deal Type'},
        {id:'annualRentProposed',name:'Annual Rent (Proposed)', subId: 'annualRentCurrent', subtitle:'Annual Rent (Proposed)'},
        {id:'firmTermRemain',name:'Firm Term Remaining', subId: 'firmTermAdded', subtitle:'(Current)'},
        {id:'maxTerm',name:'Max Available Term'},
        {id:'cash',name:'Cash Contribution'},
      ]
    }
  }
  ngOnDestroy(): void {
    if (this.transactionSubscripion) this.transactionSubscripion.unsubscribe();
  }
  dataForApprovalServiceEvent(item) {
    this.table = item;
    if(this.table) {
      this._pageEventDealsForApprovalList();
    }
  }

  private _pageEventDealsForApprovalList() {
    this.searchInput = '';
    const status = 'ForApproval'
    this.isLoading = true;
    this.dealService
      .getAllDeals(
        status,
        this.accountId,
        this.transaction.id,
        this.table.pageIndex   1,
        this.table.pageSize,
        this.searchInput,
        this.table.sortParams,
        this.table.sortDirs
      )
      .pipe(finalize(() => (this.isLoading = false)))
      .subscribe({
        error: (err) => this.notificationService.showError(err),
        next: (res) => {
          this.table.data = res.items;
          this.todalDealsForApproval = res.items.length;
          console.log(" this.todalDealsForApproval " ,  this.todalDealsForApproval )
          setTimeout(() => {
            this.trasactionService.transactionEvent.next({
              sendData: this.todalDealsForApproval,
              operation: 'transaction/update/count'
            });
          }, 0);
        },
        complete: noop,
      });
  }
}