angular 无法发出数组

Question

在 DateRangeComponent 中，我尝试使用 EventEmitter 和 Output 装饰器在单击按钮时将数组发送到另一个 (ViewerComponent) 组件。

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

您的发射器工作正常。问题出在接收器组件上。

您正在混合使用 @Input() 和 @Output()。您不需要 Input() 变量来接收发出的事件，您需要注册 Output 事件。

在您的接收组件中将 Output 事件注册为 (dataEmitter)="names = $event"

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

而不是将名称声明为 @Input() names: any;

只需声明为

names : Array<{}>;

分叉 stackblitz

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

在您的查看器组件中，不放置 *ngIf if 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);
        }
      )
  }

angular 无法发出数组

angular Cannot emit array

angular-services

angular-components

angular

angular-event-emitter