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

Question

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

E сть getData() метод в DateRangeComponent где 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

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

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

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

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

И вместо удаления имени как @Input() names: any;

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

names : Array<{}>;

Разветвленный стек

Answer 2

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

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

//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);
        }
      )
  }