Не удается получить длину массива для переменной в Angular

У меня угловой проект с функцией поиска. Мне нужно распечатать количество элементов поиска с поиском. Чтобы выполнить поиск, я фильтрую объект JSON с помощью поискового запроса и создаю новый массив с именем filterarray. Затем я беру длину фильтрующего массива и тоже распечатываю его. Но мне нужно распечатать его в другом компоненте, называемом search-count.component. Для этого я использую совместно используемый сервис count.service. Проблема в том, что когда я печатаю длину массива в привязке HTML, он будет печатать правильно, но компонент подсчета поиска имеет значение 0 alywas.

Search-Component.ts:

export class SearchResultComponent implements OnInit {

  _postsArray: JsoncallItem[] = []; //JSON-array
  value: string = ''; //search-term
  filterarray: any = []; //filtered-array
  count:string; //filtered-array-length

  constructor(private data: SendDataService, private tot: CountService){}

  getData(){
    this.data.currentValue.subscribe(value => {this.value = value;
      this.showData();
    })
  }

  showData(){
    if (this.value != null){
      this.filterarray=
        this._postsArray.filter(f => 
          f.title.toLowerCase()
            .includes(this.value.toLowerCase()))
              .map(searchname=>searchname)
    }
  }

  newCount(){
    this.tot.currentCount.subscribe(count => this.count = count);
    this.tot.changeCount(this.filterarray.length);
  }

    ngOnInit(): void{
    this.getData();
    this.newCount();
  }

}

Search-Component.html:

{{filterarray.length}}
//show correct length

search-count.ts:

export class SearchCountComponent implements OnInit {

  count: any;

  constructor(private tot: CountService) {}

  ngOnInit(): void {
      this.tot.currentCount.subscribe(count => this.count = count);
  }
}

search-count.html:

{{count}}
//show 0 always

count.service

export class CountService {

  private countSource = new BehaviorSubject('');
  currentCount = this.countSource.asObservable();

  constructor() { }

  changeCount(count: string) {
    this.countSource.next(count)
  }
}

Почему бы не возвращать напрямую поведенческий субъект? : getCount (): Observable <any> {return this.countSource.asObservable ();}

Sa Hagin 19.09.2018 07:58

вы имеете ввиду вместо подписки в search-count.ts?

user10378234 19.09.2018 08:03
console.info(this.filterarray.length) проверяет, показывает ли он правильное значение или нет
Exterminator 19.09.2018 08:14
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Angular и React для вашего проекта веб-разработки?
Angular и React для вашего проекта веб-разработки?
Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.
Угловой продивер
Угловой продивер
Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.
Мое недавнее углубление в Angular
Мое недавнее углубление в Angular
Недавно я провел некоторое время, изучая фреймворк Angular, и я хотел поделиться своим опытом со всеми вами. Как человек, который любит глубоко...
Освоение Observables и Subjects в Rxjs:
Освоение Observables и Subjects в Rxjs:
Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular
0
3
631
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Я думаю, вам лучше использовать AfterViewInit, чем OnInit, поэтому значение будет обновляться всякий раз, когда изменяется длина filterarray. вы можете использовать AfterViewInit следующим образом

 ngAfterViewInit(){
      this.tot.currentCount.subscribe(count => this.count = count);
  }
Ответ принят как подходящий

Я разобрался. Проблема в том, что я вызываю this.newCount(); в ngOnInit(), чтобы Он выполняется перед обновлением фильтра. Это было решено перемещением this.newCount(); в функцию getData() следующим образом:

getData() {
  this.data.currentValue.subscribe(value => {
    this.value = value;
    this.showData();
    this.newCount();
  })
}

ngOnInit(): void {
  this.getData();
}

Другие вопросы по теме