В чем ошибка фильтра реализованного с помощью pipe?

Question

[Адель Халитов]

Есть 2 компонента, new-task.component.ts:

import { Component, OnInit } from '@angular/core';
...
import { ShareService } from 'src/app/services/share.service';

@Component({
  selector: 'app-new-task',
  templateUrl: './new-task.component.html',
  styleUrls: ['./new-task.component.styl'],
  providers: [DatePipe]
})

export class NewTaskComponent implements OnInit {

  dataTasks: any[];
  Task = {
    actionValue: '',
    description: '',
    taskWhenDo: Date,
    lead_id: '',
    createdDate: ''
  };

  constructor(
    private myHTTP: myHTTPService,
    private datePipe: DatePipe,
    private share:ShareService
  ) {
    this.share.onChange.subscribe(cnt=>this.Task.lead_id = cnt);
  }

  ngOnInit() {
    this.getTasks();
  }
  async getTasks() {
    var dataTask = await this.myHTTP.postHTTP('/getTasks', {lead_id: this.Task.lead_id})
    .then( (res: Array<String>) => {
      return res;
    });
    var dataComment = await this.myHTTP.postHTTP('/getComments', {_id: this.Task.lead_id})
    .then( (res: Array<String>) => {
      return res;
    });
    return this.dataTasks = dataTask.concat(dataComment);
  }
}

Вывод this.dataTasks в new-task.component.html

<div class="col-12" *ngFor="let n of ( dataTasks | tasks )" style="padding: 0.5rem; border: 1px solid red;">
    <p>{{n.actionValue}}</p>
    <p>{{n.description}}</p>
    <p>{{n.taskWhenDo | date:'dd.MM.yyyy HH:mm'}}</p>
    <p>Дата создания: {{n.createdDate | date:'dd.MM.yyyy HH:mm'}}</p>
  </div>
</div>

Тут сортировка вывода filters.pipe.ts

import { Pipe, PipeTransform } from '@angular/core';
/*
 * Raise the value exponentially
 * Takes an exponent argument that defaults to 1.
 * Usage:
 *   value | exponentialStrength:exponent
 * Example:
 *   {{ 2 | exponentialStrength:10 }}
 *   formats to: 1024
*/
@Pipe({
    name: 'tasks'
})
export class FiltersPipeCustom implements PipeTransform {

  transform(tasks: any[]) {
      console.log(tasks);
    tasks.sort(function(a, b){
        return a.createdDate - b.createdDate;
    });
  }
}

lead-page.component.ts:

import { Component } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { myHTTPService } from 'src/app/services/HTTP/myhttp.service';
import { ShareService } from 'src/app/services/share.service';

@Component({
  selector: 'app-lead-page',
  templateUrl: './lead-page.component.html',
  styleUrls: ['./lead-page.component.styl']
})
export class LeadPageComponent implements OnInit {

  Lead = {
    _id: '',
    firmName: '',
    address: '',
    contactNumber: [],
    contactEmail: [],
    contactName: '',
    position: '',
    lprsName: '',
    parser2gis: ''
  };

  constructor(
    private route: ActivatedRoute,
    private myHttp: myHTTPService,
    private share: ShareService
  ) {
    this.share.onChange.subscribe(cnt => this.Lead._id = cnt);
  }

  ngOnInit() {
    this.sub = this.route.params.subscribe(params => {
    this.id = params['id'];
    this.getLeadInfo();
   });
  }
  async getLeadInfo() {
    var data = await this.myHttp.postHTTP('/getLeadInfo', {_id: this.id} );
    for (let x in data) {
		  for (let y in this.Lead) {
			  if (x == y) {
				  this.Lead[y] = data[x];
			  }
		  }
    }
    return this.share.shareVarible(this.Lead._id); //Тут вот инитиализируется передача переменной в другой компонент
  }
}

Далее сервис, который принимает переменную

import {EventEmitter} from '@angular/core';

export class ShareService {
  private leadId:string = '';
  
  onChange:EventEmitter<string> = new EventEmitter();

  public shareVarible (some){
      this.leadId = some;
    this.onChange.emit(this.leadId);
  }

}

В итоге такая вот ошибка


Как заставить работать эту сложную для меня схему?
Почему он выводит filters.pipe.ts:17 undefined, 2 раза, причем второй раз со значением?

Comments

[Дмитрий Лузанов]

Так а ошибка где?

[Адель Халитов]

Дмитрий Лузанов, Я загрузил

Answer 1

[Дмитрий Лузанов]

Вы объявили значение dataTasks: any[];, но ничего ему не присвоили, оно равно undefined. Можно сделать так dataTasks: any[] = new Array();. Т.е. чтобы до того момента, пока данные не будут получены - там был массив а не undefined.

Comments

[Адель Халитов]

Дмитрий Лузанов Ошибка действительно исчезла, на такой банальной вещи столько времени потерял.
Но моя сортировка все равно не работает, с чем это может быть связанно?

[Дмитрий Лузанов]

Адель Халитов, а вы ничего из метода transform своего Pipe не вернули.

[Дмитрий Лузанов]

Адель Халитов, попробуйте так:

return tasks.sort(function(a, b){
        return a.createdDate - b.createdDate;
    });

[Адель Халитов]

Дмитрий Лузанов, Большое спасибо!

[Адель Халитов]

Дмитрий Лузанов, А можно еще вопрос?
Почему он выводит filters.pipe.ts 2 раза?
И почему в первом случае он не определяется, приходится метод еще вызывать и в ngOnChange() для того, чтобы логика работала
Да и вообще это странно, почему переменная Task.lead_id определяется с задержкой, многие методы работают не корректно из за этого

[Дмитрий Лузанов]

Почему он выводит filters.pipe.ts 2 раза?

Первый раз при инициализации компонента, второй раз (и последующие) когда данные поменялись. Он-то не знает были ли у вас данные изначально или вы их получите позже. Срабатывает на каждое изменение.
Второе не совсем понял.

Могу вам посоветовать использовать всю мощь RxJS, т.к. он уже у вас есть в ангуляре. Там это всё разруливается меньшим количеством кода без косяков, если правильно всё сделать, правда порог вхождения выше. Завтра могу скинуть как это выглядело бы с RxJS.

[Дмитрий Лузанов]

Ещё вы подписываетесь вот тут

this.share.onChange.subscribe(cnt => this.Lead._id = cnt);

но нигде не отписываетесь. Выстрелите себе в ногу, если продолжите оставлять так, ибо подписчик не уничтожится при удалении компонента, а продолжит слушать события до самой выгрузки из памяти сборщиком мусора. Можно записать

this.changes = this.share.onChange.subscribe(cnt => this.Lead._id = cnt);

И при ngOnDestroy отписываться.
Всего этого можно избежать, полностью используя RxJS.
Ещё лучше забыть про тип any хотя бы в тех местах, где вы работаете непосредственно с бизнеслогикой.

[Адель Халитов]

Дмитрий Лузанов, Спасибо разберусь с RxJS(время на пример не тратьте).
2е я имел в виду,
Вот консоль сервера, при getTasks(), конкретно запрос dataTask.
new-task.component.ts
В момент вызова dataTask, this.Task.lead_id = "",
Поэтому он выводит это

Поэтому он не нашел в mangoDB такого элемента с пустым ID.

После вызывается dataComment, но на этом шаге this.Task.lead_id уже чему то равен, поэтому из метода getTasks у меня приходит от сервера не вся информация, то есть this.Task.lead_id присваивается значение с какой то задержкой, конструкция моих методов из за этого рушится.
Вот что я имел в виду, как можно это избежать?