угловой не может излучать массив

Question

В DateRangeComponent Я пытаюсь передать массив при нажатии кнопки в другой (ViewerComponent) компонент, используя декоратор EventEmitter и Output.

В DateRangeComponent есть метод getData(), где EventEmitter выдает массив из службы.

@Output() dataEmitter = new EventEmitter<any[]>();

  constructor(private dataService: DataService) { }

  getData() {
    let fromDate = this.dateName[0];
    let toDate = this.dateName[1];

    this.dataService.findNameByDate(fromDate, toDate)
      .map(names => {
          this.names = names;
          this.dataEmitter.emit(this.names);
          //console.log(JSON.stringify(this.names));
        }
      )
  }

Компонент должен получить испущенный массив, используя Input декоратор:

@Input() names: any;

и в HTML есть привязка свойства:

<app-table *ngIf="selectedDate" [names]="names"></app-table>

но есть проблема с получением. Что не так?

Stackblitz

Answer 1

Несколько вещей.

Ваше приложение должно быть таким:

//app.html

    <!--we use (dataEmiter) to get the changes, and [names] to send the properties -->
    <app-date-range (dataEmitter)="emit($event)"></app-date-range>
    <app-viewer [names]="names"></app-viewer>

//And the component like
export class AppComponent  {
 names:any[]=[];  //<--declare a variable
 emit(data:any[])
 {
   this.names=data;
 }
}

В вашем компоненте vievewer не ставьте * ngIf, если тег app-table, я выбираю положить в div и использовать names.length

<div class="container">
  <div class="row" *ngIf="names.length">
    <app-table [names]="names"></app-table>
  </div>
</div>

Если вы хотите смоделировать get, измените сервисную функцию findByDate на

findNameByDate(fromDate: String, toDate: String) {
    return Observable.of(this.data);
  }

Конечно, функция диапазона дат должна быть

getData() {
    let fromDate = this.dateName[0];
    let toDate = this.dateName[1];

    this.dataService.findNameByDate(fromDate, toDate)
      .subscribe(names => {  //<---subscribe
          this.names = names;
          this.dataEmitter.emit(this.names);
          console.log(this.names);
        }
      )
  }

Answer 2

Ваш излучатель работает нормально. Проблема с компонентом получателя.

Вы смешиваете @Input() с @Output(). Вам не нужно иметь переменную Input() для получения отправленного события, вам нужно зарегистрировать событие Output.

Зарегистрируйте событие Output в принимающем компоненте как (dataEmitter)="names = $event"

<app-date-range (dataEmitter)="names = $event"></app-date-range>

И вместо того, чтобы объявить имя как @Input() names: any;

просто объявите это как

names : Array<{}>;

Разветвленный Стекблит